how to loop through array using ngFor in angular 11

Question

i have a api responce like

res.attribute

0: {relate_id: 15, pid: 9, attr_slug: "size", items: "s,m,l", id: 1, …}
1: {relate_id: 16, pid: 9, attr_slug: "color", items: "yellow", id: 2, …}
length: 2

i need two set of radio buttons for size and color..i achived that through

 <section class="example-section"  *ngFor="let attr of Attr" >
      
        <mat-radio-button *ngFor="let checkbox of attr.items.split(',')" class="example-margin">{{checkbox}}</mat-radio-button>
    
    </section>

but, every radio button is like same name(only one from all 4 (s,m,l,yellow) can be selected)

what i am expecting is two different set of radio buttons like size and color

Abhinav Kumar · Accepted Answer · 2021-04-27 11:49:16Z

1

You can bind the input property name with the radio type you want.

[name]="attr.attr_slug"

This way it has a radio group that will be group by your slug name.

<section class="example-section"  *ngFor="let attr of Attr" >
      
        <mat-radio-button *ngFor="let checkbox of attr.items.split(',')" 
         [name]="attr.attr_slug"
         class="example-margin">{{checkbox}}</mat-radio-button>
    
    </section>

answered Apr 27, 2021 at 11:49

Abhinav Kumar

3,0741 gold badge19 silver badges31 bronze badges

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

1 Comment

Pugazh Over a year ago

i need those two selected values ...how is that possible?

Eldar · Accepted Answer · 2021-04-27 13:06:24Z

1

You should be using a mat-radio-group to group up the radio buttons inside. Try it like below :

<section class="example-section"  *ngFor="let attr of Attr" >
    <mat-radio-group [name]="attr.attr_slug">
        <mat-radio-button *ngFor="let checkbox of attr.items.split(',')" class="example-margin">{{checkbox}}</mat-radio-button>
    </mat-radio-group>
</section>

Edit: For getting the desired "s,yellow" or "m,yellow" output you can do a workaround below.

Since your slugs are size and color. Define a model has those properties in your component:

model = {
size = "",
color = "",
}

Bind the radio group to the corresponding properties like below

<mat-radio-group [name]="attr.attr_slug" [value]="model[attr.attr_slug]">

So later in your component get your combined value like this :

const finalValue = `${this.model.size}, ${this.model.color}`

edited Apr 27, 2021 at 13:06

answered Apr 27, 2021 at 11:49

Eldar

10.9k2 gold badges20 silver badges40 bronze badges

5 Comments

Pugazh Over a year ago

how to take selected values from this?

Eldar Over a year ago

@Pugazh radio group has a property named value it gives you the selected value.

Pugazh Over a year ago

thanks , but i need a value like "s,yellow" or "m,yellow" (refer api response)

Pugazh Over a year ago

i tried using (click)="onClick(checkbox)" , where i am getting recently clicked button..but i need a pair of size and color

raghu raman Over a year ago

sorry @Eldar ..i am getting nothing...i have raised a detailed question ..please checkout stackoverflow.com/questions/67294497/…

Qayyum Shareef · Accepted Answer · 2021-04-27 11:56:18Z

0

As @Eldar said you need to include mat-radio-button inside mat-radio-group then you have two different sets of radio button groups. You can refer to the Angular Material docs here.

answered Apr 27, 2021 at 11:56

Qayyum Shareef

547 bronze badges

1 Comment

Pugazh Over a year ago

how to take selected values from this

Collectives™ on Stack Overflow

how to loop through array using ngFor in angular 11

3 Answers 3

1 Comment

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related