My directive does not work in Angular

Asked

Viewed 111 times

0

I have the following directive:

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

@Directive({
  selector: '[tipo-coluna]',
})
export class  TipoColunaDirective {

    @Input() corOperacao: number;

    constructor(public renderer: Renderer,
                public elementRef: ElementRef
    ) {
        this.bordaCorColuna()
    }

    private bordaCorColuna() {
        console.log(this.corOperacao);

        if(this.corOperacao == 1){
            this.renderer.setElementStyle(this.elementRef.nativeElement, 'border-left', '2px solid green');
        }
        if(this.corOperacao == 2){
            this.renderer.setElementStyle(this.elementRef.nativeElement, 'border-left', '2px solid #BFB34D');
        }
        if(this.corOperacao == 3){
            this.renderer.setElementStyle(this.elementRef.nativeElement, 'border-left', '1px solid #BF4D3C');
        }



    }
}

In my template I have the following repeat structure:

<tr *ngFor="let log of logs; let i = index">
            <td tipo-coluna corOperacao='1' scope="row">{{log.operacao}}</td>
            <td>{{log.created_at | date:'dd/MM/yyyy' }} {{log.created_at | date:'shortTime' }}</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>

In my console.log(this.corOperacao) is returning Undefined. Why?

In my module I declared this directive.

angular

1 answer

1


I was able to solve by taking this.bordaCorColuna() function from the constructor and moving to ngOnInit. worked as a charm.

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.