Angular custom component attribute setting

Question

(anyone is welcome to rephrase my question, I am not sure how to word it)

Say I created an Angular component, something like this:

<app-my-test></app-my-test>

How can I allow the user to set options on and off by just typing the option into the component, something like this:

<app-my-test booleanCheck></app-my-test>

Then in my .ts file, I would like booleanCheck to be true if they added it, and false if they didn't add it. Below is a blitz to play around with. The goal is to get the console.log to log true if booleanCheck was added, and false if it was not added.

https://stackblitz.com/edit/angular-xr3p84?file=src%2Fapp%2Fapp.module.ts

I do NOT want this as an answer please:

<app-my-test booleanCheck="true"></app-my-test>
<app-my-test [booleanCheck]="true"></app-my-test>

Sunil · Accepted Answer · 2018-11-15 07:44:20Z

9

You can leverage the setter of @Input which will be called if the input is available.

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'my-test',
  templateUrl: './app.test.html',
  styleUrls: ['./app.test.css']
})
export class TestComponent implements OnInit {
  private _booleanCheck = false;

  @Input()
  set booleanCheck(param) {   // this is setter for booleanCheck input.
    this._booleanCheck = true;
  }

  ngOnInit() {
    console.log('ngOnInit');
    console.log(this._booleanCheck);
  }
}

Working copy is here - https://stackblitz.com/edit/angular-9ubmg7

edited Nov 15, 2018 at 7:44

answered Nov 15, 2018 at 7:13

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

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

6 Comments

Freddy Bonda Over a year ago

Thank you very much :) Would you mind just adding a little bit of information on what set does please? This is new to me so understanding it will help a lot.

Sunil Over a year ago

Added sort comment.

Freddy Bonda Over a year ago

But what does the setter do though?

Sunil Over a year ago

Since the setter is decorated with @Input. So if the input booleanCheck is provided, it will call the setter instead of setting the value of variable directly.

Freddy Bonda Over a year ago

Oh ok! So if someone does [booleanCheck]="donkey", the booleanCheck will NOT be set to donkey, only the setter will be called?

|

sloth · Accepted Answer · 2018-11-15 07:20:10Z

6

You'll have to create a directive that will set the property for you in the host component (Note that the property may no longer be an @Input):

StackBlitz demo

@Component({
  selector: 'my-test',
  templateUrl: './app.test.html',
  styleUrls: [ './app.test.css' ]
})
export class TestComponent implements OnInit {
  public booleanCheck: boolean;

  ngOnInit() {
    console.log('ngOnInit');
    console.log(this.booleanCheck);
  }
}

@Directive({
   selector: '[booleanCheck]' 
})
export class BooleanCheck {
  constructor(@Host() @Self() @Optional() host: TestComponent) {
      host.booleanCheck = true;
  }
}

(For an even simpler solution, look here)

edited Nov 15, 2018 at 7:20

answered Nov 15, 2018 at 7:12

sloth

101k21 gold badges182 silver badges224 bronze badges

Comments

Padmapriya Vishnuvardhan · Accepted Answer · 2018-11-15 07:03:01Z

2

Since you are passing the attribute to the custom component, it is not possible to add it like how you want. You are passing the input to the custom component and it should be like

<app-my-test [booleanCheck]="true"></app-my-test>

In your component it can be taken like

@Input() booleanCheck;

And if its true / false, you can enable / disable the logs.

Hope I answered your question.

answered Nov 15, 2018 at 7:03

Padmapriya Vishnuvardhan

2,16616 silver badges18 bronze badges

2 Comments

Freddy Bonda Over a year ago

Thanks for the answer but your answer is exactly what I stated I do not want, so you are not really help man

Padmapriya Vishnuvardhan Over a year ago

In this case, there is no way to add the attribute to the custom component as far as I know.

Freddy Bonda · Accepted Answer · 2018-11-15 07:01:36Z

0

One solution might be to check if the variable booleanCheck is undefined or not. This will console.log(this.booleanCheck) an empty string:

<app-my-test booleanCheck></app-my-test>

This will console.log(this.booleanCheck) undefined

<app-my-test></app-my-test>

So you can maybe use that to assign false if undefined and true if it is an empty string

answered Nov 15, 2018 at 7:01

Freddy Bonda

1,2596 gold badges18 silver badges40 bronze badges

Collectives™ on Stack Overflow

Angular custom component attribute setting

4 Answers 4

6 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related