CODEWITHSUNDEEP
jquerycssangularjsangularjs-directiveangular-components
Gaurav_0093
Gaurav_0093

Reputation: 1030

how to set bold and italic property in component label using angular4

I am having a inside that component there is a template and selector here is my component

@Component({
    selector: 'labelnumeric',
    template: '<label>hello</label>'
})

export class LabelNumeric
{

}

I want to add a property to the label bold and italic dynamically so how can i do this?

Upvotes: 4

Views: 9066

Answers (2)

Amit Kumar
Amit Kumar

Reputation: 5962

you can use ngClass for this. 

@Component({
    selector: 'labelnumeric',
    template: ' <label [ngClass]="{'font-italic': someCondition, 'font-bold' : someOtherCondition}">hello</label>'
})

export class LabelNumeric
{

}

assign these two classes on some conditions, then using css you can set font-style and font-weight.

.font-italic {
  font-style: italic;
}

.font-bold {
  font-weight: bold
  }

Upvotes: 3

Gerry
Gerry

Reputation: 409

Try it like this. You have to define .class-bold in css. Either in the decorator or externally.

@Component({
    selector: 'labelnumeric',
    template: '<label #mylabel>hello</label>'
})

export class LabelNumeric implements OnInit {

  @ViewChild('mylabel') label;

  @Input() isBold: boolean = false;

  ngOnInit() {
    if(this.isBold){
      this.label.nativeElement.classList.add('class-bold');
    }
  }
}

And use it like this: <labelnumeric [isBold]="true"></labelnumeric>

If that works you can define an @Input for italic accordingly.

Upvotes: 2

Related Questions