Menu
I'm trying to create a directive that accepts in input a icon property which would be the icon name. So the directive internally would try to find a span element where it will apply a class. I wonder if this is possible from within the directive applied to the parent. Or do I have to create a directive for the child too?
Here's my HTML code:
<div sfw-navbar-square sfw-navbar-icon>
<span class="mdi mdi-magnify"></span>
</div>
Here's the directive itself:
import { Directive, ElementRef, Renderer } from '@angular/core';
@Directive({
selector: '[sfw-navbar-square]'
})
export class NavbarSquareDirective {
// Here I'd like to define a input prop that takes a string
constructor(private el: ElementRef, private renderer: Renderer) {
this.renderer.setElementClass(this.el.nativeElement, 'navbar-square-item', true);
this.renderer.setElementClass(this.el.nativeElement, 'pointer', true);
this.renderer.setElementClass(this.el.nativeElement, 'met-blue-hover', true);
// Here I'd like to pass that string as a class for the span child element. Can I have access to it from here?
}
}
208
We can get child component values in the parent component by creating a reference to the child component using the @ref directive in the Parent component. Using the reference instance, you can access the child component values in the parent.
If we also specify an input property in our directive's class using the same value as the selector property value we can input data into our directive using the attribute on the host element. This instructs Angular that the appBtnGrow class member property is now an input that can receive a value from the host element.
At the core, a directive is a function that executes whenever the Angular compiler finds it in the DOM. Angular directives are used to extend the power of the HTML by giving it new syntax. Each directive has a name — either one from the Angular predefined like ng-repeat , or a custom one which can be called anything.
To create a custom directive we have to replace @Component decorator with @Directive decorator. So, let's get started with creating our first Custom Attribute directive. In this directive, we are going to highlight the selected DOM element by setting an element's background color. Create an app-highlight.
The parent component was able to set the value of the child DOM Element. ViewChild makes it possible to access a child component and call methods or access instance variables that are available to the child. Let’s say we have a ChildComponent. Ideally, you will use @angular/cli to generate your component:
Let's dive deep into it. What is an Angular Directive? Directives are the functions which will execute whenever Angular compiler finds it. Angular Directives enhance the capability of HTML elements by attaching custom behaviors to the DOM. From the core concept, Angular directives are categorized into three categories.
Let’s say we have a ChildComponent. Ideally, you will use @angular/cli to generate your component: Otherwise, you may need to create child.component.css and child.component.html files and manually add it to app.module.ts:
There may be situations where you want to access a directive, child component, or a DOM element from a parent component class. The ViewChild decorator returns the first element that matches a given directive, component, or template reference selector. ViewChild makes it possible to access directives.
You can just use an input as you normally would. DOM manipulation would normally be done in the ngAfterViewInit when all views are initialized, but it will probably also work in the ngOnInit as the icon property will be set and you don't have any ViewChildren you try to access.
HTML:
<div sfw-navbar-square [sfwNavbarIcon]="'my-icon'">
<span class="mdi mdi-magnify"></span>
</div>
Here's the directive itself (Angular 4):
import { Directive, ElementRef, Renderer2 } from '@angular/core';
@Directive({
selector: '[sfw-navbar-square]'
})
export class NavbarSquareDirective {
@Input('sfwNavbarIcon') icon:string;
constructor(private el: ElementRef, private renderer: Renderer2) {
this.renderer.addClass(this.el.nativeElement, 'navbar-square-item');
this.renderer.addClass(this.el.nativeElement, 'pointer');
this.renderer.addClass(this.el.nativeElement, 'met-blue-hover');
}
ngAfterViewInit() {
let span = this.el.nativeElement.querySelector('span');
this.renderer.addClass(span, this.icon);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
