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

Question

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>

It's not clear to me what you try to accomplish. If you add @Input() buttonOne:string; to your components class you can access the value using ngOnInit() { console.log(this.buttonOne); } The input value won't be available in the constructor which is executed before ngOnInit. angular.io has a lot of great tutorials — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 20, 2018 at 8:29
@GünterZöchbauer I've edited my post to make it more understandable. — Tavadur
– Tavadur, Commented Feb 20, 2018 at 8:49

Günter Zöchbauer · Accepted Answer · 2018-02-20 08:56:36Z

1

<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.

answered Feb 20, 2018 at 8:56

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tavadur Over a year ago

Thank you so much! Working perfectly.:)

Günter Zöchbauer Over a year ago

Glad to hear. .

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related