Unable to link to 'amount' because it is not a recognized attribute of 'ng-wrapper'

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"

angulartypescript

Answer №1

It is recommended to remove the @Input decorator from the count property, as it is being defined within the same component

Answer №2

It has been pointed out by others that count is not a property of ng-container, which explains why your code isn't functioning correctly. To fix this issue, you'll need to delete the [count]=config.count assignment within your ng-container. Additionally, you can remove the @input() count: number; since count is no longer being assigned. Lastly, make sure to update any references to count in your HTML file to config.count instead. Once these changes are made, your code should work as expected!

Answer №3

When troubleshooting my issue, I found that removing the property ('') was the solution.

//prior to fixing the error

@Input() ('title') title: any;

Error message: Unable to bind to 'title' as it is not a recognized property of 'ng-container'

//after fixing the issue

@Input() title: any;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 2: Capturing scroll events from the parent element within a Directive

One of the challenges I encountered is with a directive called [appInvalidField] that functions like a custom tooltip for validation purposes. To ensure it appears above everything else within dialogs, I attach it to the body and position it near the relev ...

angulartypescript

Find the distinct values from an array of objects containing varying elements using Typescript

My array contains dynamic elements within objects: [ { "Value1": [ "name", "surname", "age" ], "Value2": [ "name" ...

arraysangulartypescript

Using vuex-class to interact with Vuex in non-Vue components

Is it possible to access Vuex outside of a Vue component using vuex-class? In a typical scenario, the process is quite straightforward: // some JS file import store from './../store'; // path to Vuex store store.commit('ux/mutationName&ap ...

javascripttypescriptvue.jsvuex

RXJS buffering with intermittent intervals

Situation: I am receiving audio data as an array and need to play it in sequence. The data is coming in continuously, so I am using an observable to handle it. Since the data arrives faster than it can be played, I want to use a buffer to store the data w ...

javascriptangularaudiorxjs

Steps to assign a JSON file to an array within an object in Angular

What is the best way to assign a JSON file to an array within my "Client" object? I currently have a JSON file named Clients.json with the following structure: { "clients": [ { "firstName": "nameA", "lastName": "lastA", "doctorsNam ...

jsonangulartypescript

When sending a POST request in Angular and Node.js, the req.body object is found to be empty {}

Presenting My Service Module import { Injectable } from "@angular/core"; import { HttpClient } from "@angular/common/http"; import { Items } from "./inventory.model"; import { Router } from "@angular/router"; impor ...

node.jsangularexpressmongooseangular10

Distribute among an array of specific types

I am trying to achieve this behavior using Typescript: type animals = 'cat' | 'dog' let selectedAnimals: animals[] = ['cat'] selectedAnimals = [ // <- Type 'string[]' is not assignable to type 'animals[]&ap ...

typescript

Discover the step-by-step guide to implementing pagination using NG-ZORRO-Andt in your Angular

I am currently using NG-ZORRO Ant Design pagination on my HTML page and it is displaying correctly in my browser. However, I am struggling with linking the data from the API to the pagination feature. Here is the snippet of my HTML code: <div class ...

htmlangularantdng-zorro-antd

Can user data be securely stored in localStorage using Angular?

I'm diving into the world of Angular and embarking on my first Angular app. I find myself pondering the safety of storing user data in localStorage. If it's not secure to do so, what alternative methods should I explore, especially since I am usi ...

node.jsangularauthenticationcookiesauthorization

Retrieving the chosen option from a personalized drop-down element

I have been working on a project using Angular 2, where I created a dropdown component with the following code: @Component({ selector: 'dropdown', template: ` <div class="row" > <div class="col-sm-3"> ...

angulartypescriptangular-ui-bootstrapangular2-forms

What is the best way to implement a dispatch function in TypeScript?

Despite my expectations, this code does not pass typechecking. Is there a way to ensure it is well typed in Typescript? const hh = { a: (_: { type: 'a' }) => '', b: (_: { type: 'b' }) => '', } as const; ex ...

typescript

Activate a different link when one is clicked in the Angular framework

I am working on a sidebar that contains the following elements: <ul class="nav nav-pills flex-column"> <li class="nav-item collapsed side" data-toggle="collapse" data-target="#home" > <a class="nav-link" routerLinkActive="a ...

angularangular5

Steps for selectively targeting and updating a group of properties in a TypeScript class

Is there a way to consolidate this code into one function that can handle all the tasks below? I'm adding more text here to meet the requirements and hoping for a solution. Thank you! TypeScript is an amazing language that differs slightly from JavaS ...

angulartypescript

Create a new instance of the parent class in TypeScript to achieve class inheritance

Looking for a solution to extending a base class Collection in JavaScript/TypeScript to handle domain-specific use cases by implementing a "destructing" method like filter that returns a new instance with filtered elements. In PHP, you can achieve this usi ...

typescriptinheritance

Guide to defining a typescript class property using an index signature

type TField = { field1: string; field2: boolean; field3: TMyCustom; } class Test1 { // I opt for using TypeScript's index signature to declare class fields [key: keyof TField]: TField[typeof key] // Instead of individually declaring each ...

typescript

Incorporate playerVars options into your Angular application with the help of @angular/youtube-player package

I am currently using the @angular/youtube-player to display a video within my Angular application. I want the video to play automatically upon loading. After reviewing the documentation, I found the necessary parameters to enable autoplay, but for some re ...

angularyoutube-iframe-api

Using TypeScript to deserialize various types from a shared object

I am currently dealing with a JSON array containing serialized objects, each of which has a type field. My challenge lies in deserializing them properly due to TypeScript not cooperating as expected: Check out the TypeScript playground for reference. type ...

typescript

Is it necessary to have a premium firebase/firestore account in order to set up stripe payments?

When learning how to integrate Stripe payments with Angular and Firebase, make note that a paid Firebase account is required for the cloud function to work. External API requests are blocked on the free "Spark" plan. ...

angularfirebasegoogle-cloud-firestoregoogle-cloud-functions

Encountering difficulties when attempting to load a module with the "js" extension in a TypeScript environment

When making a GET request with Systemjs, the extension .js is not being added to the URL. These are my TypeScript Classes customer.ts import {Address} from "./Address"; export class Customer { private _customerName: string = ""; public Customer ...

javascripttypescriptvisual-studio-2013systemjs

Guide on connecting ngrx/store to an angular router guard

As someone who is new to ngrx/store, I am embarking on my initial project utilizing this tool. After successfully setting up my angular project with ngrx/store, I discovered how to dispatch a load action following the initialization of my main component: ...

angularangular2-routingngrxngrx-effects