Angular4入門_Vol.8

参考サイト

https://www.codingforentrepreneurs.com/projects/try-angular-v4/ http://getbootstrap.com/ https://www.npmjs.com/package/ngx-bootstrap http://valor-software.com/ngx-bootstrap/#/

ngx-bootstrap carousel

• home componentを作成する。$ng g component home

• import { HomeComponent } from './home/home.component';を、app.routing.tsに追記する。

import { NgModule }            from '@angular/core';
import { RouterModule, Routes} from '@angular/router';

import { HomeComponent } from './home/home.component';
import { VideoListComponent } from './video-list/video-list.component';
import { VideoDetailComponent } from './video-detail/video-detail.component';

const appRoutes: Routes = [
  {
    path:"",
    component: HomeComponent,
  },
  {
    path:"videos",
    component: VideoListComponent,
  },
  {
    path:"videos/:slug",
    component: VideoDetailComponent,
  },
]

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes
    )
  ],
  exports:[
    RouterModule
  ]
})
export class AppRoutingModule{ }

• app.module.tsに、carousel をimportする。

// RECOMMENDED (doesn't work with system.js)
import { CarouselModule } from 'ngx-bootstrap/carousel';
// or
import { CarouselModule } from 'ngx-bootstrap';

@NgModule({
  imports: [CarouselModule.forRoot(),...]
})
export class AppModule(){}

• home.component.htmlにngx-carouselのsample codeをコピペしてみる。

<carousel>
  <slide>
    <img src="assets/images/nature/4.jpg" alt="First slide">
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </slide>
  <slide>
    <img src="assets/images/nature/5.jpg" alt="Second slide">
    <div class="carousel-caption">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </slide>
  <slide>
    <img src="assets/images/nature/6.jpg" alt="Third slide">
    <div class="carousel-caption">
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </slide>
</carousel>

• うまく表示された〜！

• 最終的に、style.css, home.component.htmlを以下のように修正した。

/* You can add global styles to this file, and also import other style files */
.main-container{
  min-height: 800px;
  margin-bottom: 20px;
}

.img-main-carousel{
  max-height: 500px;
  margin: 0 auto;
}

.carousel-control.right, .carousel-control.left{
  cursor: pointer;
}

<div class="row">
  <div class="col-sm-12">
  <carousel class='text-center'>
    <slide>
      <a class='' href="/videos/video-1">
      <img class='img-main-carousel' src="assets/images/nature/4.jpg" alt="First slide">
      </a>
      <div class="carousel-caption">
        <h3>First slide label</h3>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        <p><a class='btn btn-default' href='/videos/video-1'>Video 1</a></p>
      </div>
    </slide>
    <slide>
      <a class='' href="/videos/video-1">
      <img class='img-main-carousel' src="assets/images/nature/5.jpg" alt="Second slide">
      </a>
      <div class="carousel-caption">
        <h3>Second slide label</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p><a class='btn btn-default' href='/videos/video-1'>Video 1</a></p>
      </div>
    </slide>
    <slide>
      <a class='' href="/videos/video-1">
      <img class='img-main-carousel' src="assets/images/nature/6.jpg" alt="Third slide">
      </a>
      <div class="carousel-caption">
        <h3>Third slide label</h3>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        <p><a class='btn btn-default' href='/videos/video-1'>Video 1</a></p>
      </div>
    </slide>
  </carousel>
  </div>
</div>

まとめ

• ngx-bootstrap からmoduleをimportするというところ以外は普通のbootstrapと同じように使えるところが便利やなぁ(^^)