Understanding Bootstrapping Angular Cycle Day 15

Lecture 15 : Understanding Bootstrapping Angular Cycle

Bootstrapping In Angular :


  • 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.

Bootstrapping In Angular Cycle :

@Component :

  • 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.

Decorator :

  • 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

Popular posts from this blog

Basic Concept In C Sharp Day 16

Image
Lecture 16 : Basic Concept In C Sharp C Sharp : C#  (pronounced  see sharp , like the musical note C♯, but written with the number sign) is a general-purpose, multi-paradigm programming language encompassing static typing, strong typing, lexically scoped, imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines. C# was developed around 2000 by Microsoft as part of its .NET initiative and later approved as an international standard by Ecma (ECMA-334) in 2002 and ISO (ISO/IEC 23270) in 2003. It was designed by Anders Hejlsberg, and its development team is currently led by Mads Torgersen, being one of the programming languages designed for the Common Language Infrastructure (CLI). The most recent version is 9.0, which was released in 2020 in .NET 5.0 and included in Visual Studio 2019 version 16.8. C-sharp musical note : " C sharp " was inspired by the musical notation whereby a sharp symb
Read more

Understanding C Sharp Day 18

Image
Lecture 18 : Understanding C Sharp   Class Library : A class library  defines types and methods that are called by an application. The  Class Library .DLL  contains program code, data, and resources that can be can used by other programs and are easily implemented into other Visual Studio projects. Create New Class Library Project with Visual Studio :  Create New Project : Select C# in the language tab And then select  Class Library (.NET Framework) and press the NEXT button You can then proceed to give your project a Project Name Call the project  MathLibrary  (in order to copy/paste example code) Press the CREATE button, After you have given a name to your project Building the Class Library .DDL for C# : The following code example is a C# version of the Class Library.  The Class Library .DLL contains program code, data, and resources.  The Class Library in this example will feature a custom Math API that has a set of functions to Substract, Devide and Multiply numbers.
Read more

Concept In Angular Day 14

Image
Lecture 14 : Concept In Angular What is ngModel : ngModel is Angular’s answer to the two-way data binding problem. Previously in AngularJS, there was no way to perform a binding which would update automatically. What are Directives : Directives are markers on a DOM element that tell AngularJS to attach a specified behaviour to that DOM element or even transform the DOM element and its children. Angular includes various built-in directives. In addition to this, you can create custom directives for your application. ng-model Directive : The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. With the ng-model directive you can bind the value of an input field to a variable created in AngularJS. Two-Way Binding : The binding goes both ways. If the user changes the value inside the input field. Two-way binding, we can display a data property as well as an update that property when the user makes changes. Two-way binding
Read more