How to detect if Angular 2 component has attribute

Question

Suppose I have an Angular 2 component that looks like this

@Component({
  selector: 'my-message',
  template: `
    <p *ngIf="messageWasSet">{{message}}</p>
    <p *ngIf="!messageWasSet">No message was specified</p>
  `
})
export class MessageComponent {
  @Input() public message: string;

  public messageWasSet: boolean; // How to calculate this?
}

Here are some example usages:

Example 1

<my-message message="Hi world"></my-message>

<!-- Rendered innerHTML -->
<p>Hi world</p>

Example 2

<!-- suppose obj.message = 'Viva Angular 2!' -->
<my-message [message]="obj.message"></my-message>

<!-- Rendered innerHTML -->
<p>Viva Angular 2!</p>

Example 3

<!-- suppose obj.message = undefined -->
<my-message [message]="obj.message"></my-message>

<!-- Rendered innerHTML -->
<p></p>

Example 4

<!-- Notice that there is no `message` binding at all -->
<my-message></my-message>

<!-- Rendered innerHTML -->
<p>No message was specified</p>

My question is how can I calculate the messageWasSet boolean property without using ElementRef?

battmanz · Accepted Answer · 2016-09-28 18:36:56Z

6

@Component({
  selector: 'my-message',
  template: `
    <p *ngIf="messageWasSet">{{message}}</p>
    <p *ngIf="!messageWasSet">No message was specified</p>
  `
})
export class MessageComponent {
  private _message: string;      

  public get message() {
    return this._message;
  }

  @Input() public set message(value: string) {
    this.messageWasSet = true;
    this._message = value;
  }

  public messageWasSet: boolean; // How to calculate this?
}

edited Sep 28, 2016 at 18:36

battmanz

2,3064 gold badges25 silver badges34 bronze badges

answered Sep 28, 2016 at 18:10

Günter Zöchbauer

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

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

4 Comments

battmanz Over a year ago

I want to programmatically compute messageWasSet based on whether or not the message="..." attribute exists on the component. Consumers of the component don't set messageWasSet, it's computed automatically. Basically, I want to distinguish between the fact that the message is undefined because it was never set vs it's undefined because it was set to undefined. Does that make sense?

battmanz Over a year ago

Your answer is very close. It just needs to handle the fact that even if value is undefined, I still want messageWasSet to be true. And just for completeness, will you add a getter for the message (making sure to save the value to some private property)?

Günter Zöchbauer Over a year ago

I updated my answer again. If this doesn't work you'll probably need to use elRef.nativeElement.getAttribute(), getAttribute() won't recognize [message]="obj.message" though because attribute bindings are never added to the DOM. You might be able to use a combination of these methods though to cover all cases.

battmanz Over a year ago

This works! I edited your answer to include a getter for the message just for completeness.

Madhu Ranjan · Accepted Answer · 2016-09-28 18:23:04Z

you may create messageWasSet as a property which returns value based upon message like below,

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

@Component({
  selector: 'my-app',
  template: `<h3>How to detect if Angular 2 component has attribute</h3>
  <hr />
  Child component
  <my-message [message]="obj.message" ></my-message>
  `
})
export class AppComponent {
  obj = { message: 'hello' };
}

@Component({
  selector: 'my-message',
  template: `
    <p *ngIf="messageWasSet">{{message}}</p>
    <p *ngIf="!messageWasSet">No message was specified</p>
  `
})
export class MessageComponent {
  @Input() public message: string;

  get messageWasSet(){
    return !!this.message;
  }
}

Here is Plunker!!

Hope this helps!!

Collectives™ on Stack Overflow

How to detect if Angular 2 component has attribute

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related