Как создать директиву в angular

Question

Читал про то как создать директиву, однако нашёл только про то как воздействовать на css,никак не пойму как применить к html. Нужно реализовать следущую задачу:

Нужно создать директиву [list], применив который к тегу div, появиться меню из переменной x=['html','css','js'] т.е. код должен выглядеть так:

x = [“HTML”, “CSS”, “JS”]

<div [list]=”x”>

</div>

в последствии внутри div получим:

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JS</li>

</ul>

буду признателен подробным объяснениям

Answer 1

https://stackblitz.com/edit/stackoverflow-menu-directive

app.component.ts:


    listItems = ['HTML', 'CSS', 'JS'];

app.component.html:

<div list [listItems]="listItems"></div>

list.directive.ts:


      @Input() listItems = [];

      constructor(private renderer: Renderer2, private el: ElementRef) { }

      ngOnInit() {
        let ul = this.renderer.createElement('ul');
        this.renderer.appendChild(this.el.nativeElement, ul);

        this.listItems.forEach(item => {
          let text = this.renderer.createText(item);
          let li = this.renderer.createElement('li');

          this.renderer.appendChild(li, text);
          this.renderer.appendChild(this.el.nativeElement.children[0], li);
        })
      }

БЛОГ НА HUSL

Как создать директиву в angular

Ответы (1 шт):