[Link].
Computer Science-III Year I-Sem
UNIT- 3 Notes
SUBJECT: USER INTERFACE FRAMEWORKS
CODE: MR23-1BSCC16
Attribute Directives in Angular
Directives are classes that add additional behavior to elements in your Angular applications.
Angular built-in directives are used to manage forms, lists, styles, and what users see.
Types of Directives:
1. Structural Directives - ngIf (ngIf, ngIf-else, ngIf-then-else), ngFor, ngSwitch
2. Attribute Directives- ngClass, ngStyle, ngModel
3. Component Directives
Structural Directives:
They change the DOM layout by adding and removing DOM elements. Usually changes in the
DOM structure are done using Javascript in HTML, but in Angular DOM changes are done in
the .html file only.
For using directives inside an html tag we need to add a prefix ‘*’
Eg: <h1 *ngIf> </h1>
Attribute Directives:
Attribute directives changes the appearance or behavior of a DOM element.
These directives look like regular HTML attributes in templates.
ngClass Directive:
The ngClass directive is used to dynamically set CSS classes on an HTML element by databinding
an expression that represents all classes to be added.
The directive operates in three different ways, depending on which of three types the expression
evaluates to:
1. If the expression evaluates to a string, the string should be one or more space-delimited class
names.
2. If the expression evaluates to an object, then for each key-value pair of the object with a truthy
value the corresponding key is used as a class name.
3. If the expression evaluates to an array, each element of the array should either be a string as in
type 1 or an object as in type 2.
[Link]:
.one{
background-color: aquamarine;
color: red;
}
.two{
background-color: #ff7fb4;
}
.three{
background-color: rgb(127, 255, 138);
color: rgb(88, 12, 228);
font-size: 60px;
}
.four{
background-color: rgb(181, 219, 13);
color: rgb(228, 91, 12);
font-size: 80px;
}
[Link]:
<div style = "text-align: center;">
<h1> WELCOME TO ANGULAR</h1>
<! ----- ngClass with String >
<div class="one">Hello All!!!</div> <br>
<div [ngClass]="'one three'">This is ngClass with String</div> <br>
<! ----- ngClass with Array >
<div [ngClass]="['one', 'four']">This is ngClass with Array</div>
OUTPUT:
Generating a component in Angular
Components are the main building blocks for Angular applications. Each component consists of:
An HTML template that declares what renders on the page
A TypeScript class that defines behavior
A CSS selector that defines how the component is used in a template.
To create a component in Angular, navigate to the directory containing the Angular Application
and run the following command:
ng generate component <component-name> OR ng g c <component-name>
Step1: ng g c mycomp command creates the following:
1. A directory named after the component
2. A component file, [Link]
3. A template file, [Link]
4. A CSS file, [Link]
5. A testing specification [Link]
Step 2: Verify the 4 files generated by default and don’t do any changes to the existing files
Step3: After creating the component, open [Link] file and import the component
created into this file as follows:
[Link] file:
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {MycompComponent} from './mycomp/[Link]'
@Component({
selector: 'app-root',
imports: [RouterOutlet, MycompComponent}],
templateUrl: './[Link]',
styleUrl: './[Link]'
})
export class AppComponent {
title = 'my-angular-app';
}
Step 4: open [Link] file and render the name of the selector “app-mycomp”
in the [Link] file.
[Link] file:
<h1> Welcome to Angular </h1>
<app-mycomp> </app-mycomp>
OUTPUT:
Structural directives in Angular:
i. ngFor
ii. ngSwitch
Structural Directives:
They change the DOM layout by adding and removing DOM elements. Usually changes in the
DOM structure are done using Javascript in HTML, but in Angular DOM changes are done in
the .html file only.
For using directives inside an html tag we need to add a prefix ‘*’
Eg: <h1 *ngIf> </h1>
ngFor:
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.
[Link] file:
import { Component } from '@angular/core';
import {CommonModule} from '@angular/common';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule],
templateUrl: './[Link]',
styles: ['h1 { color: red; }']
})
export class AppComponent {
nums=[1,2,3,4,5,6,7,8,9,10]
}
[Link] file:
<h1 *ngFor ="let n of nums">Heading {{n}}</h1>
OUTPUT:
Routing in Angular
Angular Router is used to handle the navigation from one view to the [Link] Router enables
navigation by interpreting a browser URL as an instruction to change the view.
Basic Steps in Routing:
i. Creating the components which are to be linked through Routing
ii. Configuring the Routes
iii. Adding Routes in template.
iv. Adding Router Outlet and RouterLink
Step 1: Create the following components using the command
ng g c <component_name>
1. home
2. about
3. contact
Eg.: To create the home component type: ng g c home
[Link] file:
<h1>This is Home Page of my Angular APP</h1>
[Link] file:
<h1>ABOUT MALLA REDDY UNIVERSITY</h1>
<p>This is About page</p>
[Link] file:
<h1>contact Component</h1>
<p>This is Contact Page</p>
Step 2: Configuring the Routes
The Routes are configured in the [Link] file using routerLink.
[Link] file:
<div style = "text-align: center;">
<h1> WELCOME TO MRUH</h1>
<div>
<a routerLink ="home">Home</a> |
<a routerLink ="about">About</a> |
<a routerLink ="contact">Contact Us</a> |
</div>
<router-outlet></router-outlet>
</div>
Step 3: Adding Routes in template.
The paths for the Routes are provided in the [Link] file.
[Link] file:
import { Routes } from '@angular/router';
import { HomeComponent } from './home/[Link]';
import { AboutComponent } from './about/[Link]';
import { ContactComponent } from './contact/[Link]';
export const routes: Routes = [
{path:'home', component:HomeComponent},
{path:'about', component:AboutComponent},
{path:'contact', component: ContactComponent}
{path: '', component:HomeComponent},
];
Step 4: Adding Router Outlet and RouterLink
[Link] file:
import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet,RouterLink],
templateUrl: './[Link]',
styles: ['h1 { color: red; }']
})
export class AppComponent {
}
OUTPUT:
Classification of Angular directives and program of ngIf directive.
Directives are classes that add additional behavior to elements in your Angular applications.
Angular built-in directives are used to manage forms, lists, styles, and what users see.
Types of Directives:
1. Structural Directives - ngIf (ngIf, ngIf-else, ngIf-then-else), ngFor, ngSwitch
2. Attribute Directives- ngClass, ngStyle, ngModel
3. Component Directives
ngIf:
[Link] file:
import { Component } from '@angular/core';
import {CommonModule} from '@angular/common';
@Component({
selector: 'app-root',
imports: [CommonModule],
templateUrl: './[Link]',
styleUrl: './[Link]'
})
export class AppComponent {
data="abc"
}
[Link] file:
<h1> Structural Directives </h1>
<h2 *ngIf="data">This is ngIf structural Directive Example</h2>
OUTPUT:
