How to manage Page elements in Angular 19 in the right way?

I am trying to learn Angular 19. Every thing was pretty good until i started trying to manipulate the elements on the Page. I hope someone will help me to understand the idea of it in Angular.

Example

I have list on page and i just want to add and remove new items of this list
​

List of fruits +

• apple x
• banana x

On pressing + i want add new item to the end of the list (the name of item or another content does not matter, just add new item).

On pressing x i want to delete corresponding item from the list.

in JavaScript


If i need to change page structure using native JavaScript, i must use:

• document.querySelector()
• node.append()
• node.remove()
• and so on... this tools allow me to create, add, remove and change HTML elements.

So i must:

// this is simple example without using classes

let list = document.querySelector('.listOfFruits');
let newItem= document.createElement('li');
newItem.innerHTML = 'orange';

list.append(newItem);

//another code to remove item and so own

in Angular 19


What should i use?

I learned:

• @if
• @for
• NgComponentOutlet
• ViewContainerRef

But it is not seems to be the right way to do what i want to do. And i can not find any other information in Docs with full explanation how this kind of things has to be done in Angular.

Someone, please, give me full explanation.

Thank you.

Continue reading...