angular 2+ component with attribute name and no parameters

Question

I want to allow a user to provide a list of one-word attributes without parameter values. For example,

<container row crosscenter wrap spacearound ...>

which results in something like this in container.html

<div [ngClass]="{ 'flexDisplay': true, 'directionRow': isRow, 'directionCol': isCol, 'contentSpaceAround': isSpaceAround}" ...>

What I'm missing is how to set

@Input('row') isRow = false;

to true if 'row' was present in the container line.

Any ideas? Thanks in advance. Yogi

Estus Flask · Accepted Answer · 2017-10-11 20:54:25Z

1

This can be handled in ngOnChanges. The value can be assigned either back to input property or to some object that will be passed to ngClass

ngOnChanges(changes: SimpleChanges) {
  if ('foo' in changes) {
    this.options.foo = true;
  }
}

Since there's no way how inputs can become unassigned, there's no reason to provide bindings for them. @Attribute can be used instead:

constructor(@Attribute('foo') public foo: boolean|null) {
  this.foo = (foo != null);
}

Using attributes for regular options isn't a good decision, design-wise. This prevents from setting them dynamically. Instead, it is always preferable to accept options input. If all options are supposed to be flags, it can be a string input that will be split and processed in ngOnChanges, like:

<container options="row crosscenter wrap spacearound">

or

<container [options]="'row crosscenter wrap spacearound'">

answered Oct 11, 2017 at 20:54

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

3 Comments

Yogi Bear Over a year ago

I like your answer. In particular using the options = approach. The thing I don't understand is how this will cause and onChanges event to occur. Can you help me understand that?

Estus Flask Over a year ago

Changes in @Input prop are handled with angular.io/api/core/OnChanges hook. If you set component options input, the value can be watched in ngOnChanges hook. It will run at least once with initial options value.

Yogi Bear Over a year ago

Thanks estus. I think the thing that really made this the right answer is the fact that it does run at least once with the initial options. I appreciate your help. :-)

Yogi Bear · Accepted Answer · 2017-10-11 18:18:32Z

0

I think the answer to my question is to create directives for each of the "one-word" tags (attributes) I want to use. :-)

answered Oct 11, 2017 at 18:18

Yogi Bear

9633 gold badges17 silver badges36 bronze badges

Collectives™ on Stack Overflow

angular 2+ component with attribute name and no parameters

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related