Angular

                     How an Angular App gets Loaded and  Started

 

To start an angular app , the app first executes the main.ts file  where it looks for the app.module and in the app module we have the bootstrap array that contains the AppComponent and the appComponent get executes with the html code it has.

                                        Creating a New Component

To create a component :

   1:    import Component from @anguler/core

   2:    create the component imported as a method with @ in the beginning

   3:    This component method takes an argument like : selector , template/templateUrl , style/styleUrl.

   4: Finally export the class of component file name.

Understanding the Role of AppModule and Component Declaration 

If the component created then we have to register it to the AppModule.ts file because component creation is no enough we have to tell the angular that the created component is also the part of our app. 

In order to do this we have to :

    1: import the created component .ts file and

    add that component into the declations section of the @NgModule directive.

In order to use the created component we have to simply put the component selector in the app.component.html file as tag. 

            Creating Components with the CLI & Nesting Components 

To create a component with  CLI we have to run :

ng generate component / g c component_name

example : ng g c servers

this will automatically creates a component for us and do the inclution of the file in the AppModule automatically.If not then we have to add the new component in the AppModule as we did previously.

 

                                Working with Component Templates  

Now we are using the template as external html file,but we can give the html content direct to the typescript code by using template instead of templateUrl.For this approach we can write multi-line html as well. 

example :

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-servers',

template: `<app-server></app-server>

<app-server></app-server>`,

styleUrls: ['./servers.component.css']

})

export class ServersComponent implements OnInit {

constructor() { }

ngOnInit(): void {

}

}

 

                                Working with Component Styles 

To add a style we can use the styleUrl/styles one has the external file call and another has the inline style.

example :

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

// styleUrls: ['./app.component.css']

styles:[`

h1{

color:skyblue;

}

`]

})

export class AppComponent {

}

 

                     Fully Understanding the Component Selector 

We can use the component selector in three ways :

   1:    element selector

   2:    Attribute selector

   3:    class selector

though id selector won't supported by the angular.

example : 

import { Component, OnInit } from '@angular/core';

@Component({

// selector: 'app-servers',

// selector:'[app-servers]',

selector:'.app-servers',

template: `<app-server></app-server>

<app-server></app-server>`,

styleUrls: ['./servers.component.css']

})

export class ServersComponent implements OnInit {

constructor() { }

ngOnInit(): void {

}

}