Angular 2 add attribute to element conditionally

Question

I have two buttons, going and maybe:

  toggles: any[] = [
    { response: 'going' },
    { response: 'maybe' }
  ];

which I display like this:

          <ion-col col-12 style="min-height: 250px;">
                <img class="event-home-img" src="{{mainEventImage}}" />
            </ion-col>

            <ion-col *ngFor="let toggle of toggles" col-6 style="text-align: center;">
                <button (click)="response(toggle.response)" ion-button color="danger" [attr.outline]="guestResponse !== toggle.response ? true : null"
                    full>
                    {{toggle.response}}
                </button>
            </ion-col>

guestResponse returns going or maybe based on the user's response. What I need is to add outline to the element if guestResponse doesn't match toggle.response. Now it doesn't add outline to either element.

Edit *** Response function

public guestResponse: string;

ngOnInit() {
const responses = ['going', 'maybe'];

    for (const key in responses) {
      if (responses.hasOwnProperty(key)) {
        this.db.object(`/events/${this.id}/${responses[key]}/${this.uid}`).valueChanges()
          .takeUntil(this.ngUnsubscribe)
          .subscribe((response) => this.getCurrentResponse(response, responses[key]));
      }
    }
}

  getCurrentResponse(response, key) {
    if (response) {
      this.guestResponse = key;
    }
  }

  response(event: string) {
    console.log(event);
    if (this.uid) {
      this.db.object(`/users/${this.uid}`).valueChanges()
        .takeUntil(this.ngUnsubscribe)
        .subscribe(user => this.setResponse(user, event));
    }
  }

I would start debug by [attr.outline]="guestResponse !== toggle.response ? 1: 0" Maybe null will get the whole attr ommitted — Fan Cheung
– Fan Cheung, Commented Oct 25, 2017 at 6:28
@günter-zöchbauer , the issue is "Now it doesn't add outline to either element." , means something is wrong about consition, user knows how to add dynamic attribute. — Vivek Doshi
– Vivek Doshi, Commented Oct 25, 2017 at 6:39
@VivekDoshi thanks for the hint and sorry for not paying enough attention. — Günter Zöchbauer
– Günter Zöchbauer, Commented Oct 25, 2017 at 6:41

Vivek Doshi · Accepted Answer · 2017-10-25 07:43:53Z

1

Please add :

this.guestResponse = event; inside your response(event: string) { ... } function.

response(event: string) {
    console.log(event);

    // add here if you want to show directly on click 
    // this.guestResponse = event; 

    if (this.uid) {
      this.db.object(`/users/${this.uid}`).valueChanges()
        .takeUntil(this.ngUnsubscribe)
        .subscribe(user => { 
            this.setResponse(user, event)
            // add here if you want after some db operation 
            // this.guestResponse = event;  
        });
    }
}

edited Oct 25, 2017 at 7:43

answered Oct 25, 2017 at 6:20

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

2 Comments

Ciprian Over a year ago

Still nothing. Maybe I made some other change which doesn't allow this to happen. I'll check. Thank you for your help.

Ciprian Over a year ago

You are right. Only thing I had to change is attr.outline to outline. forum.ionicframework.com/t/conditional-button-attributes/44743/…

Collectives™ on Stack Overflow

Angular 2 add attribute to element conditionally

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related