How to add some html elements using Angular2's attribute directive

Question

If a certain attribute directive is present on an HMTL element, I would like to show some additional html content. I have searched but can't find what am looking for. For example if P tag has a directive called can-delete, then I would like delete button to show.

<p can-delete>Hello World!</p>

This is what I got so far:

// >>> home.ts
import { Component } from "@angular/core";
import {canDelete } from "./can-delete.directive.ts";
@Component({
  templateUrl:"home.html",
  directives: [canDelete]
})
export class HomePage {

  constructor() {   }

}

// >>> home.html
<ion-header>
  <ion-navbar primary>
    <ion-title>
      Ionic 2
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  Content...
  <p can-delete>Hello World!</p>
</ion-content>

// >>> can-delete.directive.ts
import { Directive, ElementRef } from "@angular/core";

@Directive({
  selector: "[can-delete]"
})
export class canDelete {
  constructor(el: ElementRef) {
   //show delete button
   //<button>Delete</button>
  }
}

Alexander Abakumov · Accepted Answer · 2018-04-18 19:25:13Z

5

Your code is not valid, so here is an update:

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

@Directive({
  selector: '[appLoading]'
})
export class LoadingDirective {

  constructor(private elementRef:ElementRef){
    this.elementRef.nativeElement.innerHTML ='<h1>Hello World2</h1>';
  }
}

edited Apr 18, 2018 at 19:25

Alexander Abakumov

14.7k16 gold badges99 silver badges135 bronze badges

answered Oct 8, 2017 at 17:28

Johansrk

5,2803 gold badges40 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rishabh Garg Over a year ago

this.elementRef.nativeElement.innerHTML ='<h1 [ngStyle.color]="color">Hello World2</h1>'; and this color variable define in directive class. This is not working which shows its parsing angular attribute.

candidJ · Accepted Answer · 2016-08-15 05:36:07Z

4

you directive implementation looks incomplete. you have to bind your directive to any event like click, focus etc in order to consume that directive.

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

@Directive({
  selector: "[can-delete]"
})

export class canDelete {
  constructor(private _el: ElementRef, private _renderer : Renderer) {

  }
@HostListener('mouseenter') onMouseEnter() {
     this._renderer.createElement(this._el.nativeElement.parentNode, 'button');
  }
}

we are using createElement method to create button when user hover over element containing our directive. hope it helps!

EDIT : have a look at renderer createElement example here for more info.

edited Aug 15, 2016 at 5:36

answered Aug 15, 2016 at 5:29

candidJ

4,3791 gold badge24 silver badges33 bronze badges

2 Comments

user1275105 Over a year ago

I want delete button to show when the directive iscan-delete is present. Not on hover.

candidJ Over a year ago

you can use ngViewAfterInit for rendering the buttons.

export class MyComponent implements AfterViewInit { ngAfterViewInit() { this._renderer.createElement(this._el.nativeElement.parentNode, 'button'); } }

Parth Chokshi · Accepted Answer · 2016-08-15 02:12:07Z

0

Why don't you use *ngIf. It can be used to show conditional HTML.

Html file

<p>Hello World! <button type="button" *ngIf="showButton">Delete</button></p>

<button type="button" (click)="toggleButton()">Toggle</button>

app.component.ts

export class AppComponent implements OnInit{

    showButton:boolean;

constructor(){}

ngOnInit(){
    this.showButton = true;
}

toggleButton(){
   this.showButton = !this.showButton;
}

}

answered Aug 15, 2016 at 2:12

Parth Chokshi

6525 silver badges17 bronze badges

Comments

Shubham Verma · Accepted Answer · 2017-08-10 06:51:19Z

You should create a directive:

import { Directive,ElementRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Directive({
    selector: '[add-html]'
})

export class TestDirectives{
    constructor(el:ElementRef,private sanitizer:DomSanitizer,private elementRef:ElementRef){
            this.elementRef.nativeElement.innerHTML ='<h1>Hello World</h1>';
    }
}

and now your directive has been created and you will have add this directive into your app.module.ts like below:

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TestDirectives } from '../directives/test.directive';


@NgModule({
  declarations: [
    AppComponent,
    TestDirectives
  ],
  imports: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You will have to use your directive in your html, where you want to add this html, like in below code:

<div add-html></div>

Now see the output.

Collectives™ on Stack Overflow

How to add some html elements using Angular2's attribute directive

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related