Angular: "cannot find name", element doesn't exists yet in DOM

Question

I'm working with Angular5, I have a little chat system.

When user send a message, a LI element is created :

chat-component.html

<li #ChatListItem *ngFor="let message of messages" class="list-group-item">
    {{message}}
</li>

This means on page load, #ChatListItem doesn't exist yet in the DOM.

I need to perform some actions on #ChatListItem (i.e autoscroll), so in my component I have:

chat-component.ts

@ViewChildren('ChatListItem') chatListItem: QueryList<ChatListItem>;

But when I try to compile, I got this error message :

error TS2304: Cannot find name 'ChatListItem'.

This is still working with ng serve even if i have this error, but i cannot run any ng build.

I guess this is because #ChatListItem doesn't exist in the DOM ? How can I manage to make this work ?

Answer 1

Your element is not of type ChatListItem, but it is just an li element. So you need to provide the type of li in the QueryList.

@ViewChildren('ChatListItem') chatListItem: QueryList<HTMLLIElement>