In this post we will learn how to Create Component Angular 6. Most work you do with Angular relates to components. Basically an Angular 6 application is a tree of components with a root component. A component controls a part of the web application screen. It consists of JavaScript (or TypeScript) code, HTML code and CSS. If you are familiar with the MVC (Model-View-Controller) architecture or design pattern, each component actually uses the same architecture: the component’s code represents the controller and the HTML&CSS code represents the view.
1. Install Bootstrap 4
In this post we will integrate Bootstrap 4 in a Angular 6 project generated using Angular CLI. Now install bootstrap 4 using the following command.
1 |
npm install bootstrap --save |
Now, add the following line inside src>>styles.css file.
1 |
@import "~bootstrap/dist/css/bootstrap.min.css" |
Now the bootstrap 4 classes is already to use.
2. Create components.
Create the components folder inside app folder.
Here, we create three components (create,edit,index) by using the following command.
1 2 3 |
ng g c components/create --spec=false ng g c components/index --spec=false ng g c components/edit --spec=false |
All the components are created inside components folder. The app.module.ts file will be automatically updated also. See detail in the console.
3. Configure the routing
The Angular Router enables navigation from one view to the next as users perform application tasks, eg:
In this our application, we create one array called routes and then add the object that contains route path and route component inside app.module.ts file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: 'create', component: CreateComponent }, { path: 'edit/:id', component: EditComponent }, { path: 'index', component: IndexComponent } ]; |
Now, register these routes.
1 2 3 4 |
imports: [ BrowserModule, RouterModule.forRoot(routes) ], |
Our app.module.ts looks like
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { CreateComponent } from './components/create/create.component'; import { IndexComponent } from './components/index/index.component'; import { EditComponent } from './components/edit/edit.component'; import {RouterModule, Routes} from '@angular/router'; const routes: Routes = [ {path: 'create', component: CreateComponent}, {path:'edit/:id', component: EditComponent}, {path: 'index', component: IndexComponent} ] @NgModule({ declarations: [ AppComponent, CreateComponent, IndexComponent, EditComponent ], imports: [ BrowserModule, RouterModule.forRoot(routes) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
We can include the
1 2 3 |
<div> <router-outlet></router-outlet> </div> |
Let’s see the components based on routes as browsing http://localhost:4200/index then you can see “index works!” in the screen.
That’s all about the post Create Component Angular 6.
References
Introduction to components
Download the complete source code, click link below
ComponentAngular6App.rar (180 downloads)