Built in Directives Angular

Built-in directives

Uploaded by

mogya84

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF or read online on Scribd

0% found this document useful (0 votes)

30 views28 pages

Built in Directives Angular

Built-in directives

Uploaded by

mogya84

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF or read online on Scribd

You are on page 1/ 28

asi 118 rar Btn eter Skip to main content This is the archived documentation for Angular v17. Please visit angulardev to see this page for the current version of Angular. Built-in directives Directives are classes that add additional behavior to elements in your Angular applications, Use ‘Angular's builtin directives to manage forms, lists, styles, and what users see. ‘See the live example / download example for a working example containing the code snippets in this guide. ‘The different types of Angular directives are as follows: piv argutstiigie binaries a8asi 118 rar Btn eter Skip to main content oman Components, Used with a template. This type of directive is the most common directive type. Attribute directives Change the appearance or behavior of an element, component, or another directive. Structural Change the DOM layout by adcing and removing DOM elements. directives “This guide covers builtin attribute directives and structural directives. Built- Attribute directives listen to and modify the behavior of other HTML elements, attributes, properties, and in attribute directives ‘components. Many attribute directives are defined through modules such as the Conmontodule , RouterModule and FornsModule The most common attribute directives are as follows: piv argutstiigie binaries a8Skip to main content Noclass, Ngstyle NoModel rar Btn eter ‘Acds and removes a set of CSS classes, ‘Acds and removes a set of HTML styles, ‘Acds two-way data binding to an HTML form element, Builtin directives use only public APIs. They do not have special access to any private APIs that other directives can't access, Adding and removing classes with NgClass ‘Add or remove multiple CSS classes simultaneously with ngClass To add or remove a single class, use class binding rather than NoClass piv argutstiigie binariesrar Btn eter \Module in the component Skip to main content louse Ngc1ass, import ConmonModule and add itto the components sports lis. src/app/app components (CommonModule import Amport (CommonModule} from ‘@angular/connon 7 eComponent ({ standalone: true, a” ” imports: [ Comnontodule, // <-- import into the component la ” 1 » ‘export class AppComponent implements Oninit ( mo Using NgClass with an expression On the element youd like to style, add [ngClass] and set it equal to an expression. In this case, isSpecial is aboolean set to true in app.conponent.ts . Because isSpecial is true, ngClass applies the class of special tothe

piv argutstiigie binariesasie 118 rar eter bent html Skip to main content This div is initially saveable, unchanged, and special

For this use case, Angular applies the classes on initialization and in case of changes. The full example calls setCurrentClasses() intially with ngonInit() and when the dependent properties change through a button click. These steps are not necessary to implement ngCless . For more information, see the live example / download example app.component.ts and app.component html. Setting inline styles with NgStyle Import CommonModule in the component Touse NgStyle, import Conmonilodule and addit tothe component’s| imports ist piv argutstiigie binaries 128asie 118 rar eter nents (CommonModule import) Skip to main content import (CommonModule} from ‘Sangular/connon’ mo eComponent ({ standalone: true, a” ” imports: [ Commontodule, // <-- import into the component oi 1 » export class AppComponent implements Onrnit ( mo Using NgStyle in your component Use NgStyle to set multiple intine styles simultaneously, based on the state of the component. piv argutstiigie binariesasi 118 rar Btn eter 1 add a method to the component class Skip to main content example, setCurrentStyles() sets the property currentStyles with an object that defines three styles, based on the state of three other component properties. stc/app/app.component.s currentStyles: Record-string va ” setCurrentstyles() { // C85 styles: set per current state of component properties ‘this.currentstyles = { “font-style': this.canSave ? ‘italic’ : ‘normal’, ‘font-weight’: !this.isUnchanged ? “bold’ : ‘normal’, font-size’: this.isSpeciel ? “24px’ : “12px", string> = (): 2. To set the element's styles, add an_ngStyle property binding to currentStyles ste/epp/app.component html

This div ds initially italic, normal weight, and extra large (24px)

element and set it equal to the property, here ‘c/app/app.component.html (NgModel example label for="exanple-ngModel">[ (ngHodel) | : piv argutstiigie binariesasi 118 rar Btn eter 1)1 syntax can only set a data-bound property Skip to main content To customize your configuration, 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 value to uppercase: mponent.htmi pra ‘ Here are all variations in action, including the uppercase version: NgModel examples Current item name: Teapot without NoModel: Teapot [(naMode!)} Teapot bindon-ngModel: Teapot (rqModelChange)="..name=$ovent™: Teepet (ngModelChange)="setUppercaseName(Sevsnt)" Teapot piv argutstiigie binariesasi 118 rar Btn eter value accessors Skip to main content Ine NgMoae1 airective works for an element supported by a ControlValueAccessor. Angular provides value accessors forall ofthe basic HTML form elements. For more information, see Forms. To apply [(ngNodel) ] to-anon-form builtin 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 dont need a value accessor or NgHodel. 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, 'ypically by adding, removing, and manipulating the host elements to which they are attached. This section introduces the most common builtin structural directives: piv argutstiigie binaries ‘08Skip to main content TY Nort NoFor NgSwiteh rar Btn eter Concitionally creates or disposes of subviews from the template. Repeat @ nace for each item in alist. A set of directives that switch among alternative views. For more information, see Structural Directives. Import CommonModule in the component Tose builtin structural directives, import Cormonodule and add it to the component's imports list. piv argutstiigie binariesasie 118 rar eter nent.ts (CommonModule import Skip to main content import (CommonModule} from ‘Sangular/connon’ mo eComponent ({ standalone: true, a” ” imports: [ Commontodule, // <-- import into the component oi 1 » ‘export class AppComponent implements Onrnit ( mo Adding or removing an element with NgIf ‘Add or temove an element by applying an Naif] directive toa host element. When NgZf' is false , Angular removes an element and its descendants from the DOM. Angular then disposes of their components, which frees up memory and resources. piv argutstiigie binariesasi 118 eat-in eter dlement, bind |*ngz* toa condition expression such as isActive in the following Skip to main content ‘app component htm! When the isActive expression returns a truthy value, NgIf adds the TtenDetaiiConponent to the DOM. When the expression is falsy, NgIF removes the ItenDetailComponent from the DOM and disposes of the component and all of its subcomponents. For more information on Nor and NgIfElse | see the Nglf API documentation, Guarding against null By default, NgIf prevents display of an element bound to a null value, Touse NgIf to guard a

, add *ngif="yourProperty" tothe

In the following example, the currentCustoner name appears because there is a currentCustoner

Hello, {{currentCustoner .nane}}

However, if the property is nu11., Angular does not display the

.In this example, Angular does not display the nul customer because itis null piv argutstiigie binaries 808asie 118 rar eter bnent.html Skip to main content

Hello, ({nul1Custoner})

Listing items with NgFor Use the NgFor directive to present alist of items. 1. Define a block of HTML that determines how Angular renders a single item, 2. Tolist your items, assign the shorthand et item of itens to *ngFor st¢/app/app.component htm! div *ngFor="let item of itoms">{{item.nane}} around the host element ‘+ Repeat the for each tem inthe list For more information see the Structural directive shorthand section of Structural directives, piv argutstiigie binaries a8sea -Batn sees »mponent view Skip to main content rwrepeaca vurnpunent element, apply *ngFor to the selector. Inthe following example, the selector is

Reference a template input variable, such as. item, in the following locations: + Within the ngFor host element + Within the host element descendants to access the item's properties The following example references tem first in an interpolation and then passes ina binding to the ‘item property of the component. stc/app/app component html div *ngFo! "let item of items">({item.nane}}

For more information about template input variables, see Structural directive shorthand. piv argutstiigie binariesasi 118 rar Btn eter dex of *ngFor Skip to main content Ger tne index or) *ngFor |in a template input variable and use it in the template. Inthe *ngFor , add a semicolon and let i=index tothe shorthand, The following example gets the ‘index in avariable named i and displays it with the item name. /app/app.component html

The index property of the NoFor directive context returns the zero-based index of the item in each iteration ‘Angular translates this instruction into an around the host element, then uses this template repeatedly to create a new set of elements and bindings for each item in the list, For more information about shorthand, see the Structural Directives guide. Repeating elements when a condition is true ‘To repeat a block of HTML when a particular condition Is true, put the *ngI# on a container element that wraps an *ngFor element For more information see one structural directive per element. piv argutstiigie binaries ‘908asi 18a rar Btn eter ‘ith * ree |) ith noFori[eracksy Keauce tne numoer of calls your application makes to the server by tracking changes to an item lst. With the *ngFor trackBy property, Angular can change and re-render only those items that have changed, rather than reloading the entie list of items. 1, Add a method to the component that returns the value NgFor | should track. In this example, the value to tracks the items id Ifthe browser has already rendered ic , Angular keeps track of it and doesn't re-query the server for the same id stc/epp/app.component ‘trackByTtems(index: number, item: Item): aunber { return item.id; » 2. Inthe shorthand expression, set trackBy tothe trackByltens() method. ‘c/app/app. component htm div *ngFor="let iten of items; trackBy: trackByLtens"> ((4item.i6}}) ((atem.nane})

piv argutstiigie binaries 2028asi 118 rar Btn eter bw items with new iten.id s. In the following illustration of the track8y effect, Skip to main content ‘ew items with the same iten.id 6 + With no. trackty , both buttons trigger complete DOM element replacement. + With trackBy , only changing the id_triggers element replacement. *ngFor trackBy Resepiiems Change ids Clear counts without trackBy (0) Teapot (1) Lamp (2) Phone (@) Television 4) Fishbowi with trackBy (©) Teapot (1) Lamp (2) Phone (@) Television (4) Fishbowl piv argutstiigie binaries raasi 118 eat-in eter Skip to main content nvsuny a directive without a DOM element ‘The Angular jis a grouping element that doesn't interfere with styles or layout because ‘Angular doesnt put itn the DOM. Use when there's no single element to host the directive, Here's a conditional paragraph using src/app/app.component.html (ngif-ngcontainer) > I turned the corner shon sad)