Challenge your understanding of Angular basics with this set of beginner-level questions covering components, modules, TypeScript usage, data binding, directives, and dependency injection. Ideal for those looking to reinforce their frontend development skills with core Angular concepts.
Which decorator is used to define a new component in an Angular application?
Explanation: @Component is the decorator that marks a class as an Angular component, allowing Angular to instantiate and render it. @Module is used to define an Angular module, not a component. @Injectable is for marking services that can be injected, and @Directive is used specifically for custom directives, not components.
What is the recommended file extension for an Angular component template file?
Explanation: The .html extension is used for Angular component template files, which define the structure and layout of the UI. .ts files are used for TypeScript source code, .css for styles, and .json typically for configuration files, not templates.
In Angular, what is the main purpose of a module?
Explanation: Modules help developers logically group related components, services, and other functionality, making the application easier to manage and scale. Modules are not dedicated solely to handling HTTP requests or to persistent storage, and while they can include routing configuration, that is not their only role.
Which programming language is primarily used for developing Angular applications?
Explanation: TypeScript is the primary language for Angular applications, offering static typing and enhanced features for building robust frontend code. Python, Java, and Ruby are powerful languages but are not used for developing modern Angular applications.
Which symbol is used for property binding in Angular templates?
Explanation: Property binding in Angular uses square brackets, such as [property], to bind a property of an element to a component property. Double curly braces {{ }} are used for interpolation, ( ) for event binding, and < > is not a valid Angular binding syntax.
In Angular, which built-in directive enables two-way data binding on input elements?
Explanation: The ngModel directive provides two-way data binding, syncing changes between input elements and component properties. ngBind is not a part of Angular, ngIf is for conditional rendering, and ngFor is for looping over data, making them less appropriate here.
Which structural directive would you use to conditionally display an element in a template?
Explanation: *ngIf is the directive for conditionally including or excluding an element from the DOM. *ngFor is for iterating over lists, *ngSwitchCase is used inside an ngSwitch block for switch-like behavior, and *ngClass is actually not a structural directive.
What is the main purpose of a service in Angular?
Explanation: Services are designed to encapsulate business logic or share data/functions across multiple components. They do not render UI (that's the role of components), manage templates, or handle command-line functionality.
Which lifecycle hook is called once right after the component’s data-bound properties are set?
Explanation: ngOnInit runs immediately after Angular sets component properties, making it ideal for initialization logic. ngAfterViewInit executes after view rendering, ngOnDestroy is called before a component is destroyed, and ngDoCheck runs during every change detection cycle.
What decorator should you use to receive data from a parent component?
Explanation: @Input allows a child component to receive data from its parent through property binding. @Output is for sending events or data back to the parent. @Inject is related to dependency injection, and @Host is used for directive host binding, not for data transfer.