Breaking News: Grepper is joining You.com. Read the official announcement!

directives in angular

Bhagi Makwana answered on November 24, 2023 Popularity 10/10 Helpfulness 3/10

answer directives in angular

directives in angular

Comment

answer as following,

three types of directive in angular,
  1.Component directive
  Components are directives with a template. The @Component code that you see
  in your ts file is a component directive that are composed of template, login 
  and it's styling. 

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

@Component({
  selector: 'app-user',
  template: '<p>Hello, {{ userName }}!</p>',
})
export class UserComponent {
  userName = 'John Doe';
}

 2.Attribute directive
These directives alter the behavior or appearance of elements by manipulating
their attributes.

<!-- ngStyle directive to dynamically set styles -->
<div [ngStyle]="{ 'color': textColor, 'font-size': fontSize + 'px' }">
  Styling based on ngStyle
</div>

<!-- ngClass directive to conditionally apply CSS classes -->
<div [ngClass]="{ 'active': isActive, 'error': hasError }">
  Applying CSS classes with ngClass
</div>

3.Structural directive
These directives change the structure of the DOM by adding, removing,
or manipulating elements.

<!-- *ngIf directive to conditionally render an element -->
<div *ngIf="isLoggedIn">
  Welcome! You are logged in.
</div>

<!-- *ngFor directive to loop over a collection -->
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

Popularity 10/10 Helpfulness 3/10 Language typescript

Source: Grepper

Tags: angular typescript

Link to this answer
Share Copy Link

Contributed on Nov 24 2023

Bhagi Makwana

0 Answers Avg Quality 2/10

directives in angular

Contents

More Related Answers

directives in angular

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.