top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

Discussion About Angular 2 Directives?

0 votes
448 views

What are Angular Directives?

      Directives are a way to teach HTML new tricks. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.

Directives Types

  1. Components
  2. Structural Directives
  3. Attribute Directives
1. Components

Component decorator allows you to mark a class as an Angular component and provide additional metadata that determines how the component should be processed, instantiated and used at runtime.

Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.

 @Component({
  selector: 'myApp',
  template: `<h1>Query Home</h1>`
})
class homePage{
}

 
2. Structural Directives

Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements.

As with other directives, you apply a structural directive to a host element. The directive then does whatever it's supposed to do with that host element and its descendants.

Example

<div *ngIf="isPageEnable" class="app-name">Query Home</div>​

3.Attribute Directives

Attributes directives are responsible for change the appearance or behavior of an element, component, or another directive.

Example

<p appHighlight>Highlight me!</p>​

Video for Directives
 
posted Jan 29, 2018 by Sandeep Bedi

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button


Related Articles

What is Guard?
Guards make sure that the application user with the access permission can access that particular area in the application.
It is mainly used to protect routes.

Guard Types:

  • CanActivate - this guard helps decide whether a route can be activated or not.
  • CanActivateChild - this guard helps to decide whether children routes of a route can be activated or not.
  • CanDeactivate - this guard helps decide whether a route can be deactivated or not.
  • CanLoad - this guard helps decide whether a module can be loaded lazily or not

Guards can be implemented in different ways, but after all it really boils down to a function that returns either Observable<boolean>, Promise<boolean> or boolean. In addition, guards are registered using providers, so they can be injected by Angular when needed.

To register a guard we need to define a token and the guard function. Here’s what a super simple guard implementation could look like:


@NgModule({
  ...
  providers: [
    provide: 'CanAlwaysActivateGuard',
    useValue: () => {
      return true;
    }
  ],
  ...
})
export class AppModule {}

Video for Guard

 https://www.youtube.com/watch?v=0Qsg8fyKwO4

READ MORE
...