CODEWITHSUNDEEP
angulartypescriptangular5
Tavadur
Tavadur

Reputation: 13

Angular 5 - Component selector tag with properties to manipulate HTML elements

I would like to ask you, how can I achieve this:

I have a component (lets name it FeatureComponent) with some box and inside this box three buttons. In another component (MainComponent) I'm using my FeatureComponent by selector tag . Now what I would like to do is to use selector tag from FeatureComponent like that: 

<featurecomponent buttonOne="invisible" buttonTwo="disabled"></featurecomponent>

I've read about @Input & @Output and about directives, but I'm not sure if it's the right way.

Could someone advise me what I should use to achieve my goal?

EDIT:

Featurecomponent:

div class="group-radio-buttons">
<input type="radio"
      value="1"
      name="qaz"checked><small> buttonOne</small></div>
<input type="radio"
      value="2"
      name="qaz"><small> buttonTwo</small></div>
<input type="radio"
      value="3"
      name="qaz"><small> buttonThree</small></div>
</div>

And what I would like to achieve is to use this component in many other components but with possibility to manage this radio buttons like:

AnotherComponent:

<featurecomponent buttonOne="invisible" buttonTwo="disabled"></featurecomponent>

AnotherComponent2:

<featurecomponent buttonTwo="disabled"></featurecomponent>

Upvotes: 1

Views: 130

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657416

<featurecomponent buttonOne="invisible" buttonTwo="disabled"></featurecomponent>

Inputs allow to pass values to a component

class FeatureComponent {
  @Input() buttonOne:string;
  @Input() buttonTwo:string;
  @Input() buttonThree:string;
}

You can use view bindings to use the input values in the components template

<div class="group-radio-buttons">
<input type="radio"
      [attr.disabled]="buttonOne === 'disabled' ? true : null"
      [hidden]="buttonOne === 'invisible'
      value="1"
      name="qaz"checked><small> buttonOne</small></div>
<input type="radio"
      [attr.disabled]="buttonTwo === 'disabled' ? true : null"
      [hidden]="buttonTwo === 'invisible'
      value="2"
      name="qaz"><small> buttonTwo</small></div>
<input type="radio"
      [attr.disabled]="buttonThree === 'disabled' ? true : null"
      [hidden]="buttonThree === 'invisible'
      value="3"
      name="qaz"><small> buttonThree</small></div>
</div>

Disabled is a special attribute that has an effect no matter what the value is, this is why we use the for where we pass true or null because Angular completely removes an attribute if the value is null.

Upvotes: 1

Related Questions