WEB DEVELOPER SITE
PYTHONJAVA
TUTORIALS
 

Angular 4 Components



In this tutorial we learn about angular 4 components.

  • app.component.css
  • app.component.html
  • app.component.ts
  • app.module.ts
  • app.component.spec.ts
    • When you open up the app.module.ts file the liberate which are imported and also a declarative which is assigned the app component as following this ways:-
      import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      import { AppComponent } from './app.component';
      
      @NgModule({
         declarations: [
            AppComponent
         ],
         imports: [
            BrowserModule
         ],
         providers: [],
         bootstrap: [AppComponent]
      })
      
      export class AppModule { }
      

      The declarations include the AppComponent variable, which we have already imported. This becomes the parent component.

      Now, angular-cli has a command to create your own component. However, the app component which is created by default will always remain the parent and the next components created will form the child components.

      Let us now run the command to create the component.

      ng g component new-cmp
      
      follow this step run the above command in the command line
      C:\projectA4\Angular 4-app>ng g component new-cmp
      installing component
         create src\app\new-cmp\new-cmp.component.css
         create src\app\new-cmp\new-cmp.component.html
         create src\app\new-cmp\new-cmp.component.spec.ts
         create src\app\new-cmp\new-cmp.component.ts
         update src\app\app.module.ts
      
      


      define new-cmp folder-
      • new-cmp.component.css − css file for the new component is created.
      • new-cmp.component.html − html file is created.
      • new-cmp.component.ts − here, we can define the module, properties, etc./li>
      • new-cmp.component.spec.ts − this can be used for unit testing.
      Then you can changed app.module.ts file-
      import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      import { AppComponent } from './app.component';
      import { NewCmpComponent } from './new-cmp/new-cmp.component';
      // includes the new-cmp component we created
      
      @NgModule({
         declarations: [
            AppComponent,
            NewCmpComponent // here it is added in declarations and will behave as a child component
         ],
         imports: [
            BrowserModule
         ],
         providers: [],
         bootstrap: [AppComponent] //for bootstrap the AppComponent the main app component is given.
      })
      
      export class AppModule { }
      
      The new-cmp.component.ts file is will be created as follows −
      import { Component, OnInit } from '@angular/core'; // here angular/core is imported .
      
      @Component({
         // this is a declarator which starts with @ sign. The component word marked in bold needs to be the same.
         selector: 'app-new-cmp', //
         templateUrl: './new-cmp.component.html', 
         // reference to the html file created in the new component.
         styleUrls: ['./new-cmp.component.css'] // reference to the style file.
      })
      
      export class NewCmpComponent implements OnInit {
         constructor() { }
         ngOnInit() {}
      }
      
      

      Let us check how the flow works. Now, the app component, which is created by default becomes the parent component. Any component added later becomes the child component.

      run browser address http://localhost:4200/ it can be executes the index.html file

      <!doctype html>
      <html lang = "en">
         <head>
            <meta charset = "utf-8">
            <title>Angular 4 App example</title>
            <base href = "/">
            <meta name="viewport" content="width = device-width, initial-scale = 1">
            <link rel = "icon" type = "image/x-icon" href = "favicon.ico">
         </head>
         
        <body>
            <app-root></app-root>
         </body>
      </html>
      
      
      Must be tag in the body section.
       <app-root> </app-root>
      
      AppModule is imported from the app of the main parent module, and the same is given to the bootstrap Module, which makes the appmodule load. this is root tag created by the Angular by default this tag is called main.ts file.
      
      import { enableProdMode } from '@angular/core';
      import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
      import { AppModule } from './app/app.module';
      import { environment } from './environments/environment';
      
      if (environment.production) {
         enableProdMode();
      }
      
      platformBrowserDynamic().bootstrapModule(AppModule);
      
      you can look app.module.ts file −
      
      import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      import { AppComponent } from './app.component';
      import { NewCmpComponent } from './new-cmp/new-cmp.component';
      
      @NgModule({
         declarations: [
            AppComponent,
            NewCmpComponent
         ],
         imports: [
            BrowserModule
         ],
         providers: [],
         bootstrap: [AppComponent]
      })
      
      export class AppModule { }
      
      where the variable to store the reference of the app. Component.ts look at this app. Component.ts
      import { Component } from '@angular/core';
      
      @Component({
         selector: 'app-root',
         templateUrl: './app.component.html',
         styleUrls: ['./app.component.css']
      })
      
      export class AppComponent {
         title = 'Angular 4 Project!';
      }
      
      
      The @Component uses the templateUrl called app.component.html which can be follow
      
      <div style="text-align:center">
        <h1>
            Welcome to {{title}}.
        </h1>
      </div>
      
      
      
      import { Component, OnInit } from '@angular/core';
      @Component({
         selector: 'app-new-cmp',
         templateUrl: './new-cmp.component.html',
         styleUrls: ['./new-cmp.component.css']
      })
      
      export class NewCmpComponent implements OnInit {
         constructor() { }
         ngOnInit() {}
      }
      
      The .html called new-cmp.component.html is as follows −

      new-cmp works!

      new-cmp.component.ts

      import { Component, OnInit } from '@angular/core';
      
      @Component({
         selector: 'app-new-cmp',
         templateUrl: './new-cmp.component.html',
         styleUrls: ['./new-cmp.component.css']
      })
      
      export class NewCmpComponent implements OnInit {
         newcomponent = "Entered in new component created";
         constructor() {}
         ngOnInit() { }
      }
      
      
      In the class, we have included one variable called new component and the value is "Entered in new component made".
      The above variable is bound in the .new-cmp.component.html file as follows −
      <p>
         {{newcomponent}}
      </p>
      
      <p>
         new-cmp works!
      </p>
      
      Now since we have included the selector in the app. component .html which is the .html of the parent component, the content present in the new component .html file (new-cmp.component.html) gets displayed on the browser as follows −