I recently made some changes to my code and now I'm encountering the error message "Can't bind to 'count' since it isn't a known property of 'ng-container'"
Instead of having both the notification component and notification-widget component,
I have decided to remove the notification component and only keep the notification-widget component.
The original code, which was working properly:
notification-widget.component.html
<div class="af-notification-widget">
<notification [count]="config.count"></notification>
</div>
notification-widget.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { NotificationConfigComponent } from '../../widget-creator/notification-config/notification-config.component';
@Component({
selector: 'notification-widget',
templateUrl: './notification-widget.component.html',
styleUrls: ['./notification-widget.component.scss']
})
export class NotificationWidgetComponent implements OnInit {
@Input() config: NotificationConfigComponent;
constructor() { }
ngOnInit() { }
}
notification.component.html
<ng-container *ngFor="let item of items; let i = index">
<ng-container *ngIf="i < count">
<div class="af-notification"
(click)="itemRead(i)"
routerLink="/budgeting/{{ item.url }}">
<div class="af-notification__content">
<span class="af-notification__title"
[class.read]="item['read'] == true">{{ item['title'] }}
</span>
<span class="af-notification__description">{{ item['description'] }}</span>
<span class="af-notification__date-time">{{ item['date'] }}</span>
</div>
</ng-container>
</ng-container>
notification.component.ts
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'notification',
templateUrl: './notification.component.html',
styleUrls: ['./notification.component.scss']
})
export class NotificationComponent implements OnInit {
@Input() data: any;
@Input() count: number;
items = [
{
title: 'Import of .......... failed',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
date: '27/08/2019',
read: true
},
{
title: 'Manager ..........approved the budget and prices',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
date: '26/08/2019',
read: true
},
{
title: 'Manager ..........approved the budget',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
date: '26/08/2019',
read: true
}
];
constructor() { }
deleteWidget(i) {
this.items.splice(i, 1);
}
itemRead(i) {
if (this.items[i].read == false) {
this.items[i].read = true;
}
}
ngOnInit() { }
}
After removing the notification component and integrating its functionality into the notification-widget component, I am puzzled by the appearance of the error - "Can't bind to 'count' since it isn't a known property of 'ng-container"