Introduction
Angular is a popular JavaScript framework used for building complex, scalable, and performant web applications. It provides several features to developers to handle different use-cases. One of them is ViewChildren & QueryList.

In this article, we’ll explore ViewChildren & QueryList in Angular in detail. These features will help you to efficiently communicate between parent and child components, manipulate the view of the component, and much more.

What are ViewChildren & QueryList?

ViewChildren & QueryList both have the same purpose, i.e., to interact with the children of a particular component. The only difference is how they interact with children.

The ViewChildren is a decorator that helps to obtain a reference to all the child components or HTML elements that are present in the template of the parent component. On the other hand, QueryList is a type of collection that stores all the child components or HTML elements that match a specific selector used to query the parent component’s template.

Using ViewChildren & QueryList, you can access the child components and manipulate their view and behavior. The concept of ViewChildren & QueryList can be easily understood using an example.

Example of ViewChildren & QueryList

In this example, we’ll create a parent component that will display a list of user details fetched from the server. The user details will be shown using child components. We’ll use ViewChildren & QueryList to access children components and apply some functionalities to them.

You can start by creating a new Angular CLI project using the following command:

“`
ng new viewChildren-demo
“`

After creating the project, create a new component called `user-detail` using the following command:

“`
ng g c user-detail
“`

Inside the `user-detail` component, let’s create a simple card that will display the details of a user. You can use the following code to create the component template:

“`html

“`

In the parent component, import the `user-detail` component, and then use it to render a list of user details. You can add the code in the `app.component.ts` file:

“`typescript
import { Component, ViewChildren, QueryList } from ‘@angular/core’;
import { UserService } from ‘./user.service’;
import { User } from ‘./user’;
import { UserDetailComponent } from ‘./user-detail/user-detail.component’;

@Component({
selector: ‘app-root’,
template: `

List of Users

`,
})
export class AppComponent implements OnInit {
users: User[];
@ViewChildren(UserDetailComponent) userDetailComponents: QueryList;

constructor(private userService: UserService) {}

ngOnInit() {
this.userService.getUsers().subscribe((users) => {
this.users = users;
});
}

// apply functionality to child components
expandAll() {
this.userDetailComponents.forEach((component) => component.expand());
}
}
“`

In the code above, the `AppComponent` has a dependency on the `UserService`, which is responsible for fetching the list of user details. The `ViewChildren` decorator is used to obtain a reference to all the instances of the `UserDetailComponent`. We’re using `ngFor` to iterate over the `users` array returned from the service and rendering the `UserDetailComponent` for each user.

Also, we’ve added a button to expand all the child components in one go. Whenever a user clicks the button, the `expandAll()` method will be called. Inside this method, we’re using the `QueryList` retrieved by the `@ViewChildren` decorator to iterate over all the `UserDetailComponent` instances and calling the `expand()` method to expand the cards.

In the child component, let’s add the `expand()` method that will be called when the user clicks a button to expand the card. You can add the code in the `user-detail.component.ts` file:

“`typescript
import { Component, Input } from ‘@angular/core’;
import { User } from ‘../user’;

@Component({
selector: ‘app-user-detail’,
templateUrl: ‘./user-detail.component.html’,
})
export class UserDetailComponent {
@Input() user: User;
isExpanded = false;

expand() {
this.isExpanded = true;
}
}
“`

In the code above, we’ve added an `isExpanded` field to keep track of whether the card is expanded or not. The `expand()` method is called whenever the user clicks on a button to expand a card.

You can use the following CSS code to make our cards look more beautiful:

“`css
.card-columns {
column-count: 3;
}
.card {
background-color: #fff;
border-radius: 5px;
margin-bottom: 20px;
overflow: hidden;
}
.card-img-top {
height: 200px;
width: 100%;
object-fit: cover;
}
.card-text {
margin-bottom: 0;
}
.card-columns .card:first-child {
margin-top: 0;
}
“`

That’s it! Now save the files and test the application using the following command:

“`
ng serve
“`

FAQs

Q1. What is the use of ViewChildren & QueryList in Angular?
ViewChildren & QueryList are used in Angular to interact with the children of a particular component. With their help, you can access child components and manipulate their view and behavior.

Q2. What is the difference between ViewChildren & QueryList in Angular?
ViewChildren is a decorator that helps to obtain a reference to all the child components or HTML elements that are present in the template of the parent component. On the other hand, QueryList is a type of collection that stores all the child components or HTML elements that match a specific selector used to query the parent component’s template.

Q3. What are the benefits of using ViewChildren & QueryList in Angular?
Using ViewChildren & QueryList, you can efficiently communicate between parent and child components, manipulate the view of the component, and much more.

Q4. How do you declare ViewChildren & QueryList in Angular?
You can declare ViewChildren & QueryList in Angular by importing the `ViewChildren` and `QueryList` decorators from `@angular/core`. Then, you can use them in the component as shown in the example above.

Conclusion
In this article, we’ve explored ViewChildren & QueryList in Angular. We’ve seen how we can use them to efficiently communicate between parent and child components, manipulate the view of the component, and much more. By mastering these features, you can take your Angular projects to the next level.