MEAN Angular Components and Services 4 — Questions and Answers
Question 1: Which Angular decorator is used to define a class as a service that can be injected into components?
- @Component
- @Injectable (Correct answer)
- @NgModule
- @Directive
Correct answer: @Injectable
@Injectable marks a class as available for dependency injection by Angular's injector.
Question 2: What is the purpose of the 'providedIn' property in the @Injectable decorator?
- Specifies the component that owns the service
- Defines the HTTP endpoint for the service
- Determines the injector scope where the service is provided (Correct answer)
- Sets the default value for service properties
Correct answer: Determines the injector scope where the service is provided
The 'providedIn' property specifies which injector (e.g., 'root', a module, or a component) should provide the service.
Question 3: What happens when you provide a service at the component level using the 'providers' array in @Component?
- The service becomes a singleton shared across the entire app
- A new service instance is created for each instance of that component (Correct answer)
- The service is only available in the root module
- The service cannot be injected into child components
Correct answer: A new service instance is created for each instance of that component
Component-level providers create a new service instance for each component instance, isolating state between components.
Question 4: Which lifecycle hook is called only once when the component is first created, after input properties are set?
- ngOnChanges
- ngOnInit (Correct answer)
- ngAfterViewInit
- ngDoCheck
Correct answer: ngOnInit
ngOnInit is called once after Angular has initialized all data-bound properties and is ideal for initialization logic.
Question 5: How do you pass data from a parent component to a child component in Angular?
- Using @Output and EventEmitter
- Using @Input decorator on the child property (Correct answer)
- Using a shared service with BehaviorSubject
- Using ViewChild to directly access the child
Correct answer: Using @Input decorator on the child property
@Input() decorates a child component property so the parent can bind data to it via property binding.
Question 6: What is the correct way to emit a custom event from a child component to its parent?
- Call a method directly on the parent using ViewChild
- Use @Output with an EventEmitter and call .emit() (Correct answer)
- Use the Router to pass state between components
- Modify a shared variable in the parent template
Correct answer: Use @Output with an EventEmitter and call .emit()
@Output() combined with EventEmitter allows child components to emit events that parent components can listen to with event binding.
Question 7: Which of the following is a correct use of Angular's ViewChild decorator?
- @ViewChild(ChildComponent) child: ChildComponent; (Correct answer)
- @ViewChild('ChildComponent') child: ElementRef;
- @ChildView(ChildComponent) child: ChildComponent;
- @ViewChild[ChildComponent] child: ChildComponent;
Correct answer: @ViewChild(ChildComponent) child: ChildComponent;
@ViewChild(ChildComponent) queries the view for the first element or directive matching the selector and assigns it to the decorated property.
MEAN Angular Components and Services 4
Which Angular decorator is used to define a class as a service that can be injected into components?