Understanding Bootstrapping Angular Cycle Day 15
Bootstrapping is a technique of initializing or loading our Angular application.
Bootstrapping in Angular, let us find out how Angular works internally and bootstraps our app.
In part, this is because there’s no official or that much unofficial discussion around the idea of @Component, its functionality, when and where it’s appropriate to use them.
In this article, I will be covering everything you need to know about Angular’s @Component, including all the bits that beginner tutorials often exclude.
Finally, we arrive at AppComponent, which is the root component of the AppModule.
The code of our AppComponent is shown below :
The Class AppComponent is decorated with @Component Class Decorator.
The @Component class decorator provides the metadata about the class to the Angular.
It has 3 properties in the above code :
Selector :
This property specifies the CSS Selector, where our template will be inserted into the HTML.
The CSS Selector in our code is app-root.
templateURL :
This property contains an HTML template, which is going to be displayed in the browser.
The template file is app.component.html.
Decorators are functions that are invoked with a prefixed @ symbol, and immediately followed by a class, parameter, method or property.
The decorator function is supplied information about the class, parameter or method, and the decorator function returns something in its place, or manipulates its target in some way.
@ngModule :
An NgModule is a class marked by the @NgModule decorator.
@NgModule takes a metadata object that describes how to compile a component's template and how to create an injector at runtime.
The Angular generates the following basic AppModule when creating a new app :
The next section is where you configure the @NgModule by stating what components and directives belong to it as well as which other modules it uses.
For more information on the structure of an @NgModule, be sure to read Bootstrapping.
Button Click & Grid :
Basically, everytime the button is clicked, the given function is called.
Grid a component used for displaying tabular data in a series of rows and columns.
NgForOf Directive :
The ngForOf directive is generally used in the shorthand form *ngFor.
In this form, the template to be rendered for each iteration is the content of an anchor element containing the directive.
Syntax : *ngFor="let item of items;
Comments
Post a Comment