I'm getting the error
Type 'string' is not assignable to type 'PostCard Layout'
I have a parent component called page-blog.component.html that I am setting the class styles in, and passing them to the child component called post-card.component.ts
In my parent HTML component when I try to set the class styling variables from the class component is when it errors out for me. Happening with the @Input() layout: PostCardLayout; section.
I found what I would feel as a dirty fix but will prob allow me to make more mistakes in the future by going into to the tsconfig.json file and setting "strictInputTypes": false,
Child class post-card.component.ts
import { Component, HostBinding, Input } from '@angular/core';
export type PostCardLayout = 'list' | 'grid' | 'grid-sm';
@Component({
selector: 'app-post-card',
templateUrl: './post-card.component.html',
styleUrls: ['./post-card.component.scss']
})
export class PostCardComponent {
@Input() post;
@Input() layout: PostCardLayout;
@HostBinding('class.post-card') classPostCard = true;
@HostBinding('class.post-card--layout--list') get classPostCardLayoutList(): boolean {
return this.layout === 'list';
}
@HostBinding('class.post-card--layout--grid') get classPostCardLayoutGrid(): boolean {
return this.layout === 'grid';
}
@HostBinding('class.post-card--layout--grid-sm') get classPostCardLayoutGridSm(): boolean {
return this.layout === 'grid-sm';
}
constructor() { }
}
Here is the parent HTML component page-blog.component.html
<div class="posts-list__body">
<div *ngFor="let post of posts" class="posts-list__item">
<app-post-card
[post]="post"
[layout]="{
classic: 'grid',
list: 'list',
grid: 'grid-sm'
}"
></app-post-card>
</div>
</div>
You have typed your PostCardLayout to accept one of three values:
'list' | 'grid' | 'grid-sm'
You are attempting to pass a JSON object:
[layout]="{
classic: 'grid',
list: 'list',
grid: 'grid-sm'
}[layout]"
There also appears to be a typo in that there is an extra [layout] at the end of your input.
I'm guessing between the typo and turning off the strictIputTypes your JSON is getting morphed into a string.
using "strictInputTypes": false is a terrible idea as this defeats one of the basic purposes of TypeScript.
From what I can tell from your code you want to simply assign one of the three pre-defined values:
<app-post-card
[post]="post"
[layout]="'grid'">
</app-post-card>