Encountering an issue
The error message 'Type 'string' is not assignable to type 'PostCard Layout'' is being displayed
A parent component named page-blog.component.html is responsible for defining the class styles and passing them to the child component called post-card.component.ts
The problem arises in the parent HTML component when attempting to set the class styling variables from the class component, specifically with the section @Input() layout: PostCardLayout;
I have temporarily resolved this issue by adjusting the
"strictInputTypes": false,The child class is defined in 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() { }
}
Below is the code snippet from 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>