Directives

Directives

Directives are classes that add additional behavior to elements in your Angular applications.
There are three types of directives provided by angular:
1.Attribute Directives
2.Component Directives
3. Structural Directives


1.Attribute Directives:

It is an directives which enables us to change  the appearance or behavior of DOM elements and Angular components with attribute directives.

CLI for Directives  : ng generate directive highlight

eg:

import {Directive, ElementRef, inject} from '@angular/core';
@Directive({
    selector: '[appHighlight]',

})

export class HighlightDirective {
    private el = inject(ElementRef);
    constructor() {
            this.el.nativeElement.style.backgroundColor = 'yellow';
            }
   }


where The  @Directive() decorator's configuration property specifies the directive's CSS attribute selector, [appHighlight].

Import ElementRef from @angular/core. ElementRef grants direct access to the host DOM element through its nativeElement property.

Add ElementRef in the directive's constructor() to inject a reference to the host DOM element, the element to which you apply appHighlight.

Add logic to the HighlightDirective class that sets the background to yellow.

import {Directive, ElementRef, inject} from '@angular/core';

@Directive({
                    selector: '[appHighlight]',
                    })

export class HighlightDirective {
                                    private el = inject(ElementRef);
                                    constructor() {
                                    this.el.nativeElement.style.backgroundColor = 'yellow';
                                    }
                     }



templete:
<p appHighlight>Highlight me!</p>


Comments

Post a Comment

Popular posts from this blog

Angular Guides Notes

Image
 Angular  Angular is framework that is developed and maintained by google.It is  powerful, full-featured framework for building large-scale, structured frontend applications , especially useful in enterprise-level projects. Core Foundation  a.Components b.Services c.Data Binding d.Templates e.Routes g.Life Cycle Hooks a.Component A component is the fundamental building block of every Angular UI. Each one owns a slice of the screen and is defined by three things working together: a TypeScript class (the logic), an HTML template (the view), and CSS styles (the appearance). The decorator @Component wires them together and tells Angular where to render the component via its selector . Components communicate with each other through @Input() (data flowing in from a parent) and @Output() with EventEmitter (events flowing out to a parent). This creates a clear, predictable data flow through the component tree. Here's how the structure looks: In code: Directives: Directi...
Read more

SIGNALS

Signals: Signals is a system that tracks your states throughoout an application, allowing the framework to optimize rendering updates. It is either Writable or read-only. Writable Signals: It provide an API for updating their values directly.we can create an writable signals by calling the signal function with the signals initial value: const count =signal(0); console.log('The count is :'+count()); to change the value we use .set() or .update() count.set(3) or  count.update((value)=> value +1);
Read more