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 ?

Use in AfterViewInit and as @Suren Srapyan points - you dont have such type. Can use any - @ViewChildren('ChatListItem') chatListItem: QueryList<any>; — Julius Dzidzevičius
– Julius Dzidzevičius, Commented Apr 20, 2018 at 12:44
This means on page load, #ChatListItem doesn't exist yet in the DOM. Wrong. It exists, except if it's not wrapped in some conditional part. QueryList<ChatListItem> where you have defined this ChatListItem? — onetwo12
– onetwo12, Commented Apr 20, 2018 at 12:45

Suren Srapyan · Accepted Answer · 2018-04-20 12:44:22Z

3

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>

answered Apr 20, 2018 at 12:44

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ofc thanks you're right, ChatListItem isn't a type... Its working with HTMLLIElement instead