WEB DEVELOPER SITE
PYTHONJAVAPHP7
 

Angular 4 Components



In this tutorial we learn about angular 4 components.

Angular 4 introduce many Components.Components are basically classes that interact with the .html file of the component There are following app 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 swhich are imported and also a declarative which is assigned the app component as following this ways:-
      mport { 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 { }
      
      Then must angular-cli has a command to create your own component. look and start 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() {}
      }
      
      
      run browser address http://localhost:4200/ it can be executes the index.html file
      
      <html lang = "en">
         <head>
            <meta charset = "utf-8">
            <title>Angular 4 App example
            <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>
         </body>
      </html>
      
      
      Must be tag in the body section.
      
      
      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>
      
      
      we can created new component called new-cmp
      
      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() { }
      }
      
      
      The above variable is bound in the .new-cmp.component.html file as follows −
      <p>
         {{newcomponent}}
      </p>
      
      <p>
         new-cmp works!
      </p>
      
      browser will look like