Create Component Angular 6 - Learn Java by Examples

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.

npm install bootstrap --save

1	npm install bootstrap --save

Now, add the following line inside src>>styles.css file.

@import "~bootstrap/dist/css/bootstrap.min.css"

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.
create component angular 6 folder

Here, we create three components (create,edit,index) by using the following command.

ng g c components/create --spec=false
ng g c components/index --spec=false
ng g c components/edit --spec=false

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.
create component angular 6

3. Configure the routing
The Angular Router enables navigation from one view to the next as users perform application tasks, eg:

Enter a URL in the address bar and the browser navigates to a corresponding page.

Click links on the page and the browser navigates to a new page.

Click the browser’s back and forward buttons and the browser navigates backward and forward through the history of pages you’ve seen.

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.

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

const routes: Routes = [
  {
    path: 'create',
    component: CreateComponent
  },
  {
    path: 'edit/:id',
    component: EditComponent
  },
  {
    path: 'index',
    component: IndexComponent
  }
];

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.

imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
],

imports: [

BrowserModule,

RouterModule.forRoot(routes)

Our app.module.ts looks like

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 { }

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 inside an app.component.html file. Router-outlet acts as a placeholder that marks the spot in the template where the router should display the components for that outlet.

<div>
  <router-outlet></router-outlet>
</div>

<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 (84 downloads)

Post Views: 941

0 Shares

Leave a Comment Cancel reply