CODEWITHSUNDEEP
htmlangularlabelangular-components
Gaurav_0093
Gaurav_0093

Reputation: 1030

how to change labeltext inside template in Angular 4

I am having a angular component here is my component

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

here in template i am using hello as label text

and here component is defining in HTML control here is my HTML 

<labedate></labedate>

so on the basis of HTML control i want to change the label text how can i done this ?

is there is any possibility to set the name based on attributes ?

Upvotes: 0

Views: 3500

Answers (2)

tomichel
tomichel

Reputation: 376

What you are looking for is @Input in your component

See the documentation here: https://angular.io/guide/component-interaction

What you basically need todo is to import Input and then define an input property in your component

@Component({
selector: 'labelnumeric',
template: '<label>{{something}}</label>'
})
export class XYZ {
@Input() something: string;
}

and then you can use this like so in the html part

<labelnumeric [something]= "Text"></labelnumeric>

Upvotes: 2

Vivek Doshi
Vivek Doshi

Reputation: 58553

I think all you need is @input

@Component({
  selector: 'labelnumeric',
  template: `<label>{{numeric}}</label>`,
})
export class HelloComponent  {
  @Input() numeric: string;
}

Then use it like :

<labelnumeric numeric='10'></labelnumeric>
//OR
<labelnumeric [numeric]='your_varible'></labelnumeric>

WORKING DEMO (Basic Working demo of @input)

Upvotes: 1

Related Questions