CODEWITHSUNDEEP
angular
50_Seconds _Of_Coding
50_Seconds _Of_Coding

Reputation: 512

Issue in property binding in Angular through array

I wanted to render three cards with given contents in array using string interpollation. As well as set the style property of the specific card according to the given string in the array.

But I am having issue setting style property to my card. Issue is whenever I try to set style using string interpolation my view just displays blank.

 <div class="row-sm-2" *ngFor="let post of classifications">
     <mat-card style={{ post.margin }}>
         <p style="color: #62697D;">{{ post.content }}</p>
     </mat-card>
 </div>

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  classifications = [
    {margin: '0px; width: 100%', content: 'Hello there'},
    {margin: '20px; width: 100%', content: 'Hi there'},
    {margin: '20px; width: 100%', content: 'Well its angular'}
  ];

}

Upvotes: 0

Views: 90

Answers (3)

Barremian
Barremian

Reputation: 31105

Either enclose it in quotations, or bind to [style]. Also it'd be better to structure the data the following way and access the styles using post.style instead of post.margin.

classifications = [
  {style: 'margin: 0px, width: 100%', content: 'Hello there'},
  {style: 'margin: 20px, width: 100%', content: 'Hi there'},
  {style: 'margin: 20px, width: 100%', content: 'Well its angular'}
];

<div class="row-sm-2" *ngFor="let post of classifications">
  <mat-card style="{{ post.style }}">
    <p style="color: #62697D;">{{ post.content }}</p>
  </mat-card>
</div>

Or

<div class="row-sm-2" *ngFor="let post of classifications">
  <mat-card [style]="post.style">
    <p style="color: #62697D;">{{ post.content }}</p>
  </mat-card>
</div>

Upvotes: 1

50_Seconds _Of_Coding
50_Seconds _Of_Coding

Reputation: 512

<div class="row-sm-2" *ngFor="let post of classifications">
    <mat-card [style]= 'post.margin'>
        <p style="color: #62697D;">{{ post.content }}</p>
    </mat-card>
</div>

The issue was I was doing string interpolation instead I wanted to do is property binding all I have to do was remove curly braces

Upvotes: 0

Antoniossss
Antoniossss

Reputation: 32507

First, you are missing quotes, <mat-card style="{{ post.margin }}">

Secondly, this will resolve to a rubish markup like

<mat-card style="0px; width: 100%"> which is invalid - 0px of what?

use ngStyle to set element style dynamically.

Upvotes: 2

Related Questions