Computer Knowledge

GUI and Web Frameworks

1,711 Questions

Graphical user interface and web frameworks involve layout management, directives, and application design across platforms like Android and Angular. These concepts are tested in computer science and IT officer competitive exams. Review these questions to understand UI components and coding standards.

Android layout attributesAngular structural directivesVB.Net web methodsJava Swing componentsSiebel application framework

GUI and Web Frameworks Questions

Multiple choice

What is an attribute directive in Angular?

  1. A directive that adds or removes DOM elements from the template based on a condition.

  2. A directive that modifies the behavior of a DOM element.

  3. A directive that listens for events on a DOM element.

  4. A directive that binds a component property to a DOM element's property.
Reveal answer Fill a bubble to check yourself
B Correct answer
Explanation

Attribute directives in Angular are directives that can modify the behavior of a DOM element. They are used to add additional functionality to DOM elements.

Multiple choice

What is an example of an attribute directive in Angular?

  1. ngIf

  2. ngFor

  3. ngSwitch

  4. ngClass
Reveal answer Fill a bubble to check yourself
D Correct answer
Explanation

ngClass is an example of an attribute directive in Angular. It allows you to dynamically add and remove CSS classes to a DOM element based on a condition.

Multiple choice

What is the purpose of the *ngFor directive in Angular?

  1. To conditionally include or exclude DOM elements from the template.

  2. To repeat a block of HTML for a collection of data.

  3. To modify the behavior of a DOM element.

  4. To listen for events on a DOM element.
Reveal answer Fill a bubble to check yourself
B Correct answer
Explanation

The *ngFor directive in Angular is used to repeat a block of HTML for a collection of data. It allows you to easily iterate over an array or object and display its elements in the template.

Multiple choice

What is the syntax for the *ngFor directive in Angular?

  1. *ngFor="let item of items"

  2. *ngFor="item of items"

  3. *ngFor="items"

  4. *ngFor="let item in items | async"
Reveal answer Fill a bubble to check yourself
A Correct answer
Explanation

The syntax for the *ngFor directive in Angular is *ngFor="let item of items". It allows you to specify the collection of data to iterate over and the variable to use for each item in the collection.

Multiple choice

What is the purpose of the ngSwitch directive in Angular?

  1. To conditionally include or exclude DOM elements from the template.

  2. To repeat a block of HTML for a collection of data.

  3. To modify the behavior of a DOM element.

  4. To listen for events on a DOM element.
Reveal answer Fill a bubble to check yourself
A Correct answer
Explanation

The ngSwitch directive in Angular is used to conditionally include or exclude DOM elements from the template based on a value. It allows you to display different content depending on the value of a property.

Multiple choice

What is the syntax for the ngSwitch directive in Angular?

  1. [ngSwitch]="value"

  2. (ngSwitch)="value"

  3. *ngSwitch="value"

  4. ngSwitch="value"
Reveal answer Fill a bubble to check yourself
A Correct answer
Explanation

The syntax for the ngSwitch directive in Angular is [ngSwitch]="value". It allows you to specify the value to switch on and the different cases to handle.

Multiple choice

Which of the following is NOT a common type of user interface (UI) element?

  1. Buttons.

  2. Menus.

  3. Icons.

  4. Data analytics.
Reveal answer Fill a bubble to check yourself
D Correct answer
Explanation

Data analytics is not a type of UI element, as it involves analyzing data to understand user behavior and patterns, rather than being a visual element that users interact with.

Multiple choice

What is the providedIn property used for in Angular services?

  1. To specify the scope of the service (root or component)

  2. To define the dependencies required by the service

  3. To provide metadata about the service for DI

  4. To configure the lifecycle hooks of the service
Reveal answer Fill a bubble to check yourself
A Correct answer
Explanation

The providedIn property in Angular services determines the scope of the service, whether it's available throughout the application (root) or only within a specific component (component).

Multiple choice

Which Angular decorator is used to mark a class as a service?

  1. @Injectable()

  2. @Component()

  3. @NgModule()

  4. @Directive()
Reveal answer Fill a bubble to check yourself
A Correct answer
Explanation

The @Injectable() decorator in Angular is used to mark a class as a service, indicating that it can be injected into other components, services, or modules.

Multiple choice

Which lifecycle hook method is called when an Angular service is destroyed?

  1. ngOnInit()

  2. ngOnDestroy()

  3. ngOnChanges()

  4. ngAfterViewInit()
Reveal answer Fill a bubble to check yourself
B Correct answer
Explanation

The ngOnDestroy() lifecycle hook method in Angular is called when a service is destroyed, allowing for cleanup tasks and the release of resources.

Multiple choice

What is the purpose of the providers array in Angular modules?

  1. To define the services available within the module

  2. To specify the components and directives used in the module

  3. To configure the routing for the module

  4. To provide metadata about the module for DI
Reveal answer Fill a bubble to check yourself
A Correct answer
Explanation

The providers array in Angular modules is used to define the services that are available within that module, allowing for their injection into components and other services.

Multiple choice

Which Angular service is used for managing state and data across components?

  1. StateService

  2. StoreService

  3. ReduxService

  4. NgRx Store
Reveal answer Fill a bubble to check yourself
D Correct answer
Explanation

NgRx Store is a popular state management library for Angular that provides a centralized store for managing application state and data, enabling consistent and predictable state updates across components.

Multiple choice

What is the purpose of the @Optional() decorator in Angular?

  1. To specify that a dependency is optional and can be omitted if not provided

  2. To mark a service as optional and allow it to be injected without a provider

  3. To define the scope of a service (root or component)

  4. To provide metadata about a service for DI
Reveal answer Fill a bubble to check yourself
A Correct answer
Explanation

The @Optional() decorator in Angular allows you to specify that a dependency is optional and can be omitted if it is not provided by the DI system, providing flexibility in dependency injection.

Multiple choice

What is the providedIn property used for in Angular services?

  1. To specify the scope of the service (root or component)

  2. To define the dependencies required by the service

  3. To provide metadata about the service for DI

  4. To configure the lifecycle hooks of the service
Reveal answer Fill a bubble to check yourself
A Correct answer
Explanation

The providedIn property in Angular services determines the scope of the service, whether it's available throughout the application (root) or only within a specific component (component).

Multiple choice

What is the purpose of the @SkipSelf() decorator in Angular?

  1. To skip the current component and search for the dependency in the parent component

  2. To skip the current component and search for the dependency in the child components

  3. To skip the current component and search for the dependency in the sibling components

  4. To skip the current component and search for the dependency in the root component
Reveal answer Fill a bubble to check yourself
A Correct answer
Explanation

The @SkipSelf() decorator in Angular allows you to skip the current component and search for the dependency in the parent component, enabling you to access dependencies from higher levels in the component hierarchy.