MEAN Angular Components and Services 1 — Questions and Answers
Question 1: What decorator is used to define a service that can be injected into Angular components?
- @Injectable() (Correct answer)
- @Service()
- @Provider()
- @Inject()
Correct answer: @Injectable()
@Injectable() marks a class as available for Angular's dependency injection system, and { providedIn: 'root' } makes it a singleton app-wide.
Question 2: What is Angular's Change Detection strategy `OnPush` used for?
- Improves performance by only checking a component when its inputs change or events fire (Correct answer)
- Forces immediate UI updates on every data change
- Disables change detection for a component entirely
- Pushes data changes to a remote server
Correct answer: Improves performance by only checking a component when its inputs change or events fire
ChangeDetectionStrategy.OnPush tells Angular to skip change detection for a component unless its @Input references change, an event occurs, or an Observable emits.
Question 3: Which Angular lifecycle hook is called after the component's view and child views are initialized?
- ngAfterViewInit (Correct answer)
- ngOnInit
- ngAfterContentInit
- ngViewReady
Correct answer: ngAfterViewInit
ngAfterViewInit is called once after Angular finishes initializing the component's view and all child views, making it safe to interact with ViewChild references.
Question 4: What is the purpose of Angular's `@ViewChild` decorator?
- Gets a reference to a child component, directive, or DOM element in the template (Correct answer)
- Creates a child component programmatically
- Observes changes in child component properties
- Passes data down to a child component
Correct answer: Gets a reference to a child component, directive, or DOM element in the template
@ViewChild queries the component's view for a matching element or component and injects a reference into a component property.
Question 5: What does the Angular `async` pipe do in a template?
- Subscribes to an Observable or Promise and returns the latest emitted value automatically (Correct answer)
- Makes template expressions run asynchronously
- Delays rendering until all data is loaded
- Converts callbacks to Promises in templates
Correct answer: Subscribes to an Observable or Promise and returns the latest emitted value automatically
The async pipe subscribes to an Observable or Promise, returns the latest value, and automatically unsubscribes when the component is destroyed.
Question 6: What is the difference between `@Input()` and `@Output()` decorators in Angular?
- @Input() receives data from parent; @Output() emits events to the parent with EventEmitter (Correct answer)
- @Input() sends data to the server; @Output() receives server responses
- @Input() is for template binding; @Output() is for service calls
- @Input() handles form inputs; @Output() submits form data
Correct answer: @Input() receives data from parent; @Output() emits events to the parent with EventEmitter
@Input() allows a parent component to pass data down to a child, while @Output() with EventEmitter lets a child emit events that the parent can listen to.
MEAN Angular Components and Services 1
What decorator is used to define a service that can be injected into Angular components?