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, Oct 25 '17 at 06: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, Oct 25 '17 at 06:39
@VivekDoshi thanks for the hint and sorry for not paying enough attention. — Günter Zöchbauer, Oct 25 '17 at 06:41
@Ciprian, I can;t find (click)="response(toggle.response)" this function — Vivek Doshi, Oct 25 '17 at 07:33

Vivek Doshi · Accepted Answer · 2017-10-25T07:43:53.610

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 '17 at 07:43

answered Oct 25 '17 at 06:20

Vivek Doshi

56,649
12
110
122

Still nothing. Maybe I made some other change which doesn't allow this to happen. I'll check. Thank you for your help. – Ciprian Oct 25 '17 at 07:50
You are right. Only thing I had to change is `attr.outline` to `outline`. https://forum.ionicframework.com/t/conditional-button-attributes/44743/3 – Ciprian Oct 25 '17 at 08:18

Angular 2 add attribute to element conditionally

1 Answers1