Unit 2

Angular components & Data binding

by
Mrs. P.SHYAMALA
 Unit 2: Angular Components and Data Binding
Angular Components:
Component Configuration,
Building a Template,
Using External Templates,
Using Constructors,
Angular Routing to Single Page Application (SPA)
Angular Module
Modules, components and services are classes that use decorators.
The Angular Module must declare the Components, Pipes, and Directives it manages.
We Create the Angular Modules by decorating it with the ngModule decorator.
ngModule
The NgModule() decorator is a function that takes a single metadata object, whose
properties describe the module.
 @NgModule ({
The most important properties are as follows.   declarations: [  ],
  imports:      [  ],
  providers:    [  ],
  exports:      [  ],
  bootstrap:    [  ],
 })
export class AppModule { }
Functionalities of Modules in Angular
In a Module, there are following functionalities or Metadata:
Declarations: This one contains the name of components, pipes, and directives which are present in
the NgModule.
Imports: This contains the names of other modules whose functionalities are required by the
components of this particular module.
Exports: This is responsible for making the component template visible to other modules that can
import functionalities from this Module.
Providers: When NgModule runs, its main function is to provide the application with services. The
provider is responsible for creating Services that the NgModule requires. The services are accessible
from all parts of the App.
Bootstrap: This is the Property of Root Module. Bootstrapping is the process which initializes the
root module. The root module is responsible for initializing all the other modules.
 Angular Components
Component Configuration:
• Components are the most basic building blocks of a UI (User Interface) in an Angular
application
• A Component is nothing but a simple TypeScript class where you can create your own
methods and properties as per your requirement which is used to bind with a UI (html or css
page) of our application.
• A normal TypeScript class will become a Component class once it has been decorated
with @component decorator.
• @component decorator provides an additional metadata that determines how the
component should be processed, instantiated, and used at runtime.
• Component must belong to an NgModule in order for it to be usable by another
component or application.
• To specify that a component is a member of an NgModule, we should list it in
the declarations field of that NgModule
Within the @Component decorator are several component configuration options as
mentioned below:
1. selector: This option allows you to define the HTML tag name used to add the
component to the application via HTML.
2. template: This option allows you to add inline HTML to define the look of the
component. This is for when there won’t be very much code to add, and it’s helpful for
when you don’t want extra files.
3. templateUrl: This option allows you to import an external template file rather than
inline HTML. This is helpful for separating a large amount of HTML code out of a
component to help with maintainability.
4. styles: This option allows you to add inline CSS to your component. Use it when only
minor style changes are needed.
5. stylesUrls: This option allows you to import an array of external CSS stylesheet(s).
You should use this rather than styles when importing external CSS files.
6. viewProviders: This is an array of dependency injection providers. It allows you to
import and use Angular services that provide application functionality such as HTTP
communications.
 app.component.ts

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

decorator @Component ({
  selector: 'app-root',
 
  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'First';
 
}
 Creating the angular component
ng generate component <component_name>
OR
ng g c <component_name>

For Example
C:\Users\HP\Desktop\Angular\First>ng g c Home
 home.component.html home.component.css

<p>home Component Created! p {color: brown;

Hello World…..     background-color: yellow;
</p>     text-align:right
}

To render this Home component, first, we need to check what is the name of a  component mentioned
in selector property, which is present inside home.component.ts file.
home.component.ts
app.component.html

<app-home></app-home>
 Building a Template
What is Template
 
Templates in Angular represents a view whose role is to display data and change the
data whenever an event occurs. It's default language for templates is HTML.

Templates separate view layer from the rest of the framework so we can change the
view layer without breaking the application. 

There are two ways of defining templates,

 Inline Template
 External Template
 Inline Template

Internal HTML

Internal Styling

Class – Data, Logic and Error

Handling

Note:
• For a single-line template, you can use either single or double quotes to wrap it.
• For a multiple-line template, you use backtick (`);
 Internal HTML

Internal Styling
Using External Templates
External Template
Another way to incorporate templates and stylesheets into Angular components is through a
separate file. Using this method is handy because it helps you separate what the files do. It
also makes the component easier to read. Under your @Component decorator, you place the
keyword templateUrl followed by the path from the root of the application to your template
HTML file. Here is an example.

External HTML Template

External Styling
 app.component.ts

app.component.html

External
HTML

app.component.css
External Style
Using Constructors
When you use Angular, you often need to have default values and an initial setup for your
component variables.
Constructors go in the Component class. Their purpose is to set default values and initial
configuration of variables for that class so that when those variables are used within the
component, they are never uninitialized. The following is an example of constructor syntax.

Variable Declaration and Data Initialization

 Angular Routing to Single Page Application (SPA)
In a single-page application(SPA) , we change what the user sees by showing or
hiding portions of the display that correspond to particular components, rather
than going out to the server to get a new page. As users perform application tasks,
they need to move between the different views .

Routing in Angular allows the users to create a single-page application with

multiple views and allows navigation between them. Users can switch between
these views without losing the application state and properties.

The Router enables navigation by interpreting a browser URL as an instruction to

change the view.
 Steps to create the SPA using Angular Routing
1. Open a command prompt window and create a new project
C:\Users\HP\Desktop\Angular> ng new SPA
Would you like to add Angular routing? Yes
Which stylesheet format would you like to use? CSS

A new Project is Created

2. C:\Users\HP\Desktop\Angular>cd SPA
C:\Users\HP\Desktop\Angular\SPA>code .
3. Create the Components
C:\Users\HP\Desktop\Angular\SPA>ng g c About
C:\Users\HP\Desktop\Angular\SPA>ng g c Contact

4. Open  src\app\about\about.component.html and Change the template

next open src\app\contact\contact.component.html , Change the template
5. Update app-routing.module.ts file
• Add these import statements for the component classes
• Set up the routes by giving path and component .
6. Edit the app.component.html
Path name given in app-
routing .module.ts

<router-outlet> tag to define

where the component for the
pages should be inserted.
 <h1>ROUTING DEMO</h1>
<ul>

Edit the app.component.html   <li routerLink = "C1 " >ABOUT </li> <br>
  <li routerLink = "C2 " >CONTACT </li>

</ul>
<router-outlet></router-outlet>