Пользовательская директива - угловая 2/4/5

Question

В данный момент использую угловой 5 кли. я не знаю, почему моя пользовательская директива не работает. и даже не показывая ошибку в моей консоли. Я пытаюсь какой-то стиль, чтобы сохранить полную ширину изображения.

до сих пор.

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

@Directive({
  selector: '[fullWidthImg]'
})
export class MyStyleDirective {

  constructor(private el: ElementRef, private renderer:Renderer){
    renderer.setElementStyle(el.nativeElement,'background-image', 'url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg")')
    renderer.setElementStyle(el.nativeElement,'height', '100%")')
    renderer.setElementStyle(el.nativeElement,'background-position', 'center')
    renderer.setElementStyle(el.nativeElement,'background-repeat', 'no-repeat')
    renderer.setElementStyle(el.nativeElement,' background-size','cover')
  }

}

скопировано с другого ресурса

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

@Directive({ 
     selector: '[fullWidthImg]' 
})
export class MyStyleDirective implements AfterViewInit {
    constructor(private elRef: ElementRef) {
    }
    ngAfterViewInit(): void {
       this.elRef.nativeElement.style.backgroundImage = 'url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg")';
       //this.elRef.nativeElement.style.fontSize = '20px';
    }       
} 

HTML

<div fullWidthImg></div>

где я делаю не так если возможно, предоставьте живой пример или хороший ресурс, чтобы понять пользовательскую директиву

благодарю вас

Answer 1

Попробуй это:

<div fullWidthImg [ngStyle]="{'height': '200px', 'width':'200px'}"> </div>

Остальная часть кода работает, просто измените тег div! Вот рабочий пример: Отображение изображения

Answer 2

Сколько я должен увеличить для высоты n ширины?