In my current Angular5 project, I am implementing a small chat system. One issue I encountered is that when a user sends a message, a LI element is dynamically created:
chat-component.html
<li #ChatListItem *ngFor="let message of messages" class="list-group-item">
{{message}}
</li>
The problem arises because on page load, the #ChatListItem reference does not yet exist in the DOM.
To address this, I attempted to perform actions such as autoscrolling on the #ChatListItem. In my component file, I added the following code:
chat-component.ts
@ViewChildren('ChatListItem') chatListItem: QueryList<ChatListItem>;However, upon compilation, I received the following error message:
error TS2304: Cannot find name 'ChatListItem'.Although the application still functions with ng serve, I am unable to run ng build due to this error.
I suspect that this issue stems from the fact that #ChatListItem is not present in the DOM. How can I resolve this problem and ensure functionality?