BootStrapping Angular cycle

 16th Day               

Hey Guys, I hope that you are enjoying with my blogs writing and in previous blog we have created a project and used ngModel and Directives and  today's we will see concepts of Bootstrapping Angular Cycle so let's see Introduction .

Angular is a binding framework that is used to create web application. Angular uses typescript to write our business logic and method but browser does not understand typescript. The browser understand JavaScript . so that's why Angular CLI  come into picture. 

Angular CLI is a command-line interface tool that use to initialize, develop, scaffold and maintain Angular application directly from a command shell.  It help us to create projects easily and quickly.      

                                                   

Work of BootSrapping

• As we know that about view , model and component. 
• View i.e.  app.component.html
• model i.e. app.model.ts
• Component i.e. app.component.ts
• Module i.e. app.module.ts
• index.html: This is the first file which will run and this file run to main.ts and it is run to Module.
• i.e. first will run index.html->it will run to main.ts-> it will run to module.
  
  
  

  

  
  
  
  
• platformBrowserDynamic().bootstrapModule(AppModule)

    .catch(err => console.error(err));
• In main.ts, These above code run the module.

It is Called Decorator.

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]// Which will invoked first it has mentioned in bootstrap.

})

export class AppModule { }

• In this Bootstrap , AppComponent will invoked first. 
• export class AppModule{} it is very simple TypeScript class
• View and Component ,connected with template url. which is mentioned in below component.

@Component({

  selector: 'app-root',

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

  //its ment to specify the html

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

  //its ment to specify the html

})

• In index.html has "<app-root></app-root>" is called selector.Gets loded into view.

Button Click And Grid: We have button and patient object, we want to add in internal collection and it should be display in table 

Its Input has mentioned in previous block click here

Output:

                          Must refer this videos for more details:

                                                 Thank You...!