Angular 4 & Bootstrap 4

E ai galera. 

Neste post irei demonstrar como fazer a preparação inicial de uma aplicação que utilize Angular 4 e Bootstrap 4.

Após você instalar o Angular-CLI você pode iniciar sua aplicação angular digitando o comando no cmd:

ng new minha-app

cd minha-app

Após navegar para a pasta de sua app você pode instalar o Bootstrap 4 e o ng-bootstrap. O ng-bootstrap é uma biblioteca que contem componentes bootstrap para angular, fazendo com que não seja necessário adicionar bootstrap.js em nossa aplicação.

npm install --save @ng-bootstrap/ng-bootstrap bootstrap@4.0.0-beta

Com todas instalações realizadas, você deve registrar o css do bootsrap no arquivo angular-cli.json na propriedade styles.

"styles": [
     "../node_modules/bootstrap/dist/css/bootstrap.min.css",
     "styles.css"
 ]

No arquivo app.module.ts deve ser feito importação do módulo do ng-bootstrap o NgbModule.

	import { BrowserModule } from '@angular/platform-browser';
	import { NgModule } from '@angular/core';
	import { FormsModule } from '@angular/forms';
	import { HttpModule } from '@angular/http';
	import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
	import { AppComponent } from './app.component';
	@NgModule({
	declarations: [
	AppComponent
	],
	imports: [
	BrowserModule,
	FormsModule,
	HttpModule,
	NgbModule.forRoot()
	],
	providers: [],
	bootstrap: [AppComponent]
	})
	export class AppModule { }

view raw setup-ng-bootstrap-app.module.ts hosted with ❤ by GitHub

E por fim você pode começar a utilizar os componentes do ng-bootstrap e os demais elementos com estilo do bootsrap. Como no exemplo de carousel em app.component.html.

	<ngb-carousel [style.width]="'900px'">
	<ng-template ngbSlide>
	<img src="https://lorempixel.com/900/500?r=1" alt="Random first slide">
	<div class="carousel-caption">
	<h3>First slide label</h3>
	<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
	</div>
	</ng-template>
	<ng-template ngbSlide>
	<img src="https://lorempixel.com/900/500?r=2" alt="Random second slide">
	<div class="carousel-caption">
	<h3>Second slide label</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
	</ng-template>
	<ng-template ngbSlide>
	<img src="https://lorempixel.com/900/500?r=3" alt="Random third slide">
	<div class="carousel-caption">
	<h3>Third slide label</h3>
	<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
	</div>
	</ng-template>
	</ngb-carousel>
	<ngb-rating [(rate)]="currentRate">
	<ng-template let-fill="fill">
	<span class="star" [class.filled]="fill === 100">&#9733;</span>
	</ng-template>
	</ngb-rating>
	<hr>
	<pre>Rate: <b>{{currentRate || 0}}</b></pre>

view raw setup-ng-bootstrap-app.component.html hosted with ❤ by GitHub

Para ver o resultado final digite na sessão do seu terminal:

ng serve --o

Link para github https://github.com/jozimarback/setup-ng-bootstrap

Por hoje é só.
Até a próxima.