Scribd
Upload
5 views3 pages

UNIT II Notes

In Angular, templates are HTML views that display and update data in response to events, with the default template being app.component.html. Templates can be defined as inline or external, and they utilize HTML, interpolation, template expressions, and template statements for dynamic content. Event binding allows user interactions to trigger methods, enabling real-time updates to the displayed data.

Uploaded by

divyajegan112
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views3 pages

UNIT II Notes

In Angular, templates are HTML views that display and update data in response to events, with the default template being app.component.html. Templates can be defined as inline or external, and they utilize HTML, interpolation, template expressions, and template statements for dynamic content. Event binding allows user interactions to trigger methods, enabling real-time updates to the displayed data.

Uploaded by

divyajegan112
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

ANGULAR TEMPLATE:

⮚ In Angular, a template is a view whose purpose is to display data and update it when an
event occurs. HTML is the default template language.
⮚ The view layer is separated from the rest of the framework by templates, which allows us
to update the view layer without damaging the application.
⮚ Each Angular template in your application is a piece of HTML that the browser will
show as part of the page.
⮚ Like conventional HTML, an Angular HTML template generates a view, or user
interface, in the browser, but with a lot more capabilities.
⮚ When you use the Angular CLI to create an Angular application, the default template is
app.component.html, which contains placeholder HTML.
Templates can be defined in two ways.
1. Inline Template
2. External Template
Inline Template:
Using the template property of the @Component decorator, we may create a template directly
in the component class.
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-hi',
template: `
<h1> Welcome </h1>
<h2> Name: {{ Name }}</h2>
`,
styleUrls: ['./hi.component.css']
})
export class HiComponent implements OnInit {
Name : string = "XYZ";
constructor() { }

ngOnInit(): void {
}
}

External Template:
The external template is used by default by Angular CLI. It uses the templateUrl option to
link a template to a component. In the external format, TemplateUrl is utilised, however in the
inline format, we use template instead of templateurl.
Elements of Templates

Templates can be defined in two ways.


1. HTML
2. Interpolation
3. Template Expression
4. Template Statements

HTML
HTML is the template language used by Angular.

Interpolation
Interpolation is a type of data binding that allows us to access a component's data from a
template.
We utilise double curly brackets {{}} for interpolation.

Template Expressions
The text inside {{ }} is referred to as the template expression.
Example:
{{Expression}}

The expression is evaluated first, and the result is returned as a string via Angular. A
component instance is the scope of a template expression. That example, if we write Name,
Name should refer to the attribute of the component to which this template is attached.

Template Statements
The statements that respond to a user event are known as Template Statements.
(event) = {{Statement}}
Example
Let's make a click event: inside the hi.component.ts file, add the changename() method as
shown below.
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-hi',
templateUrl: `./hi.component.html`,
styleUrls: ['./hi.component.css']
})
export class HiComponent implements OnInit {
Name : string = "XYZ";
changeName() {
this.Name = "ABC";
}
constructor() { }
ngOnInit(): void {
}
}

Now open hi.component.html and paste the code below into it.
<h1>Hello</h1> <h2>Name : {{Name}}</h2> <p (click)="changeName()">Click here
to change</p>

The click event is bound to the changeName() method, which will be called when the mouse
is clicked during runtime. This is referred to as event binding.

1
2
3
4
5

You might also like