Scribd
Upload
21 views6 pages

Angular - Dis

The document discusses using the NgModel directive to display and update data properties in Angular. It covers binding NgModel to form elements, writing a value accessor for custom elements, and importing FormsModule. Structural directives like NgIf, NgFor, and NgSwitch are also introduced.

Uploaded by

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

Angular - Dis

The document discusses using the NgModel directive to display and update data properties in Angular. It covers binding NgModel to form elements, writing a value accessor for custom elements, and importing FormsModule. Structural directives like NgIf, NgFor, and NgSwitch are also introduced.

Uploaded by

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

Displaying and updating properties

with
Use the NgModel directive to display a data property and update that

property when the user makes changes.


1. Import FormsModule and add it to the AppComponent's

imports list.

src/app/app.component.ts (FormsModule import)

{ } '@angular∕forms'; ∕∕
<--- JavaScript import from Angular
∕* . . . *∕
@Component({
standalone: ,
∕* . . . *∕
imports: [
, ∕∕ <-- import into the
component
, ∕∕ <--- import into the
component
∕* . . . *∕
],
})
{
∕* . . . *∕
}

2. Add an [(ngModel)] binding on an HTML <form> element and

set it equal to the property, here name .

src/app/app.component.html (NgModel example)

for="example-ngModel" [(ngModel)]:

[(ngModel)]="currentItem.name"
id="example-ngModel"

This [(ngModel)] syntax can only set a data-bound property.

To customize your con�guration, write the expanded form, which

separates the property and event binding. Use property binding to set

the property and event binding to respond to changes. The following


example changes the <input> value to uppercase:

src/app/app.component.html

[ngModel]="currentItem.name"
(ngModelChange)="setUppercaseName($event)"
id="example-uppercase"

Here are all variations in action, including the uppercase version:

and value accessors


The NgModel directive works for an element supported by a

ControlValueAccessor. Angular provides value accessors for all of the

basic HTML form elements. For more information, see Forms.

To apply [(ngModel)] to a non-form built-in element or a third-party

custom component, you have to write a value accessor. For more

information, see the API documentation on DefaultValueAccessor.

When you write an Angular component, you don't need a value

accessor or NgModel if you name the value and event

properties according to Angular's two-way binding syntax.


Built-in structural directives
Structural directives are responsible for HTML layout. They shape or

reshape the DOM's structure, typically by adding, removing, and

manipulating the host elements to which they are attached.

This section introduces the most common built-in structural directives:

COMMON BUILT-IN
DETAILS
STRUCTURAL DIRECTIVES

NgIf Conditionally creates or disposes of


subviews from the template.

NgFor Repeat a node for each item in a list.

NgSwitch A set of directives that switch among


alternative views.

For more information, see Structural Directives.

Import in the component


To use built-in structural directives, import CommonModule and add it to

the component's imports list.


src/app/app.component.ts (CommonModule import)

{ } '@angular∕common';
∕* . . . *∕
@Component({
standalone: ,
∕* . . . *∕
imports: [
, ∕∕ <-- import into the component
∕* . . . *∕
],
})
{
∕* . . . *∕
}

Adding or removing an element


with
Add or remove an element by applying an NgIf directive to a host

element.

When NgIf is false , Angular removes an element and its

descendants from the DOM. Angular then disposes of their

components, which frees up memory and resources.

To add or remove an element, bind *ngIf to a condition expression

such as isActive in the following example.

src/app/app.component.html

*ngIf="isActive" [item]="item"
When the isActive expression returns a truthy value, NgIf adds the

ItemDetailComponent to the DOM. When the expression is falsy,

NgIf removes the ItemDetailComponent from the DOM and

disposes of the component and all of its subcomponents.

For more information on NgIf and NgIfElse , see the NgIf API

documentation.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy