Tag: Angular4

Angular, Angular 4, Meanstack, Typescript ,

Angular 4 Component Tutorial

by Dheeraj Kumar October 3, 2018 No Comments

In Angular major part of development has been done inside Component. We can also say that Components are basically backbone of Angular. Component provides flexibility to move from one view to another. In Angular best part is to load specific portion of page rather than loading complete page. As we know that (if u familiar little bit about how to start Angular then) after executing ng new Project_name we obtain file structure of app component which contains following files

Angular 4 component

  • app.component.css
  • app.component.html
  • app.component.spec.ts
  • app.component.ts
  • app.module.ts

If you open app.module.ts file then it contains @NgModule field and for being a part of complete application we have to list it inside the declaration filed  of @NgModule metadata.


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

Currently Declaration filed contains AppComponent which is parent component of Application, which is generated by default.Now if You  want to create our own component then you have to run following angular-cli command.

ng g component component_name

After executing this command your new component will be automatically created suppose if  you execute Angular-cli command like ng g component new-comp then after executing this command you will obtain a folder new-comp inside directory which contains app.module.ts and other files and folder contains these files

    • new-cmp.component.css − css file for the new component is created.
    • new-cmp.component.html − html file is created.
    • new-cmp.component.spec.ts − this can be used for unit testing.
    • new-cmp.component.ts − here,you can define the module, properties etc , how new-comp component will be behave with application that definition resides inside new-cmp.component.ts file.

After executing Angular-cli command changes are added inside app.module.ts file as shown below


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

Default new-comp.component.ts file looks like this way


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

File contains a new class named NewCmpComponent that implements OnInit and containing constructor and method ngOnInit which is called at time of execution of class.

Now I think you are exited for watching what the magic  is happened after making these changes so for watching changes you have to execute magical Angular-cli command ng serve and after executing command your browser display localhost:4200 page  and you will find that oh no! nothing has been changed after doing so much changes. Don’t worry I am here, you have to make some more changes for obtaining your desired output.so, why you are waiting let’s do with me. open your index.html file residing inside src folder open this file and you will obtain some codes like


<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular 4App</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>
    <!-- Body Contains app app-root which is selectro of root component-->
      <app-root></app-root>
   </body>
</html>

As we have seen index.html body tag contains <app-root></app-root> tag which shows decides which component will be displayed on the browser.If you replaced it with


<app-new-cmp></app-new-cmp>

After that our code will look like


<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular 4App</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-new-cmp></app-new-cmp>
   </body>
</html>

then You will obtained your desired outPut.

Note :

  1. app.component.html file is known as cell page
  2. new generated component pages are known as variable page.
  3. After executing ng new project_name we obtain parent component
  4. After executing ng g component componet_name we obtain child component