Check if component have attribute selector in angular2

Question

I wanna check if component has an attribute or not in Angular2. here is my component:

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

@Component({
    selector: 'field-group, field-group[half]',
    template: `
    <div class="field-group">
      <label *ngIf="label != ''">{{label}}</label>
      <ng-content></ng-content>
      <span class="validation" *ngIf="errorObject != ''"></span>
    </div>
    `
})
export class FieldGroupComponent implements OnInit {
    @Input() label: string = '';
    @Input() errorObject: any;

    constructor() { }

    ngOnInit() { }

}

For the selector I added [half]. now how can I check this component have this selector in code when I used? where can I check this exist or not? and how?

Thanks.

codef0rmer · Accepted Answer · 2017-01-22 09:46:53Z

The recommended solution would be to read the attribute's value using @Input but does not guarantee attribute's existence vs empty attribute. Refer the demo: https://plnkr.co/edit/wYuiRS8gYcyiYZt79yko?p=preview

Non-recommended but suitable solution for you is to get the hold of the component element to check the attribute's existence using ElementRef.

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

@Component({
    selector: 'field-group, field-group[half]',
    template: `
    <div class="field-group">
      <label *ngIf="label != ''">{{label}}</label>
      <ng-content></ng-content>
      <span class="validation" *ngIf="errorObject != ''"></span>
    </div>
    `
})
export class FieldGroupComponent implements OnInit {
    label: string = '';
    errorObject: any;

    constructor(private elementRef: ElementRef) { }

    ngOnInit() {
      console.log(this.elementRef.nativeElement.getAttribute('half'));
    }

}

Meir · Accepted Answer · 2017-01-22 09:38:44Z

2

Convert it to input:

selector: '[field-group]'

and then

@Input('field-group') fieldGroup: string;

Instantiation becomes:

<div [field-group]='half'>...</div>

or ...

then in your code (for example in ngInit):

if(fieldGroup === 'half'){...

answered Jan 22, 2017 at 9:38

Meir

14.4k4 gold badges44 silver badges49 bronze badges

Collectives™ on Stack Overflow

Check if component have attribute selector in angular2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related