Computer Knowledge

GUI and Web Frameworks

1,915 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 the role of the ngAfterViewInit lifecycle hook in Angular?

  1. It is called after the component's view and child views have been initialized

  2. It is called after the component's content has been projected

  3. It is called after the component's inputs have been bound

  4. It is called after the component's change detection has run
Reveal answer Fill a bubble to check yourself
A Correct answer
Explanation

The ngAfterViewInit lifecycle hook in Angular is called after the component's view and child views have been initialized. This makes it a suitable place to perform operations that require access to the component's rendered DOM elements.

Multiple choice

Which of the following is used for change detection in Angular?

  1. The ngDoCheck lifecycle hook

  2. The ngOnChanges lifecycle hook

  3. The ngOnInit lifecycle hook

  4. The ngAfterViewInit lifecycle hook
Reveal answer Fill a bubble to check yourself
A Correct answer
Explanation

The ngDoCheck lifecycle hook in Angular is used for change detection. It is called during every change detection cycle, allowing components to detect and respond to changes in their input properties or state.

Multiple choice

What is the purpose of the @Input decorator in Angular?

  1. To mark a property as an input property

  2. To mark a property as an output property

  3. To mark a property as a state property

  4. To mark a property as a service property
Reveal answer Fill a bubble to check yourself
A Correct answer
Explanation

The @Input decorator in Angular is used to mark a property as an input property. This allows the property to be bound to a value from the parent component or directive.

Multiple choice

Which of the following is used for event handling in Angular?

  1. Event listeners

  2. Event bindings

  3. Event decorators

  4. Event directives
Reveal answer Fill a bubble to check yourself
B Correct answer
Explanation

Event bindings in Angular are used to handle user input and events. They allow components to respond to events such as clicks, keypresses, and mouse movements.

Multiple choice

Which of the following is used to navigate between routes in React Routing?

  1. <Link> component

  2. <Router> component

  3. <Route> component

  4. <Switch> component
Reveal answer Fill a bubble to check yourself
A Correct answer
Explanation

The `` component is used to navigate between routes in React Routing. It provides a way to link to other routes within the application, allowing users to navigate between different views or components.

Multiple choice

What is the purpose of the withRouter() higher-order component in React Router?

  1. It allows you to access the routing context in a component

  2. It allows you to navigate between routes

  3. It allows you to manage the state of the current route

  4. It allows you to optimize the performance of the current route
Reveal answer Fill a bubble to check yourself
A Correct answer
Explanation

The withRouter() higher-order component in React Router allows you to access the routing context in a component. This is useful when you need to access information about the current route, such as the pathname, search parameters, and hash, in a component that is not a direct descendant of the `` component.

Multiple choice

What property is used to define the direction of flex items in a flex container?

  1. flex-direction

  2. flex-wrap

  3. justify-content

  4. align-items
Reveal answer Fill a bubble to check yourself
A Correct answer
Explanation

The flex-direction property determines the direction in which flex items are laid out within the flex container. It can be set to row, column, row-reverse, or column-reverse.

Multiple choice

What property is used to control the wrapping behavior of flex items when they reach the end of a flex container?

  1. flex-direction

  2. flex-wrap

  3. justify-content

  4. align-items
Reveal answer Fill a bubble to check yourself
B Correct answer
Explanation

The flex-wrap property controls whether flex items should wrap to the next line or remain on the same line when they reach the end of the flex container. It can be set to nowrap, wrap, or wrap-reverse.

Multiple choice

What property is used to distribute space between flex items along the main axis of the flex container?

  1. flex-direction

  2. flex-wrap

  3. justify-content

  4. align-items
Reveal answer Fill a bubble to check yourself
C Correct answer
Explanation

The justify-content property distributes space between flex items along the main axis of the flex container. It can be set to flex-start, flex-end, center, space-between, or space-around.

Multiple choice

What property is used to distribute space between flex items along the cross axis of the flex container?

  1. flex-direction

  2. flex-wrap

  3. justify-content

  4. align-items
Reveal answer Fill a bubble to check yourself
D Correct answer
Explanation

The align-items property distributes space between flex items along the cross axis of the flex container. It can be set to flex-start, flex-end, center, baseline, or stretch.

Multiple choice

What property is used to specify the initial size of flex items in a flex container?

  1. flex-grow

  2. flex-shrink

  3. flex-basis

  4. flex
Reveal answer Fill a bubble to check yourself
C Correct answer
Explanation

The flex-basis property specifies the initial size of flex items in a flex container. It can be set to a specific length value, a percentage, or auto.

Multiple choice

What property is used to control how flex items grow when there is extra space in the flex container?

  1. flex-grow

  2. flex-shrink

  3. flex-basis

  4. flex
Reveal answer Fill a bubble to check yourself
A Correct answer
Explanation

The flex-grow property controls how flex items grow when there is extra space in the flex container. It can be set to a number, a percentage, or 0.

Multiple choice

What property is used to control how flex items shrink when there is not enough space in the flex container?

  1. flex-grow

  2. flex-shrink

  3. flex-basis

  4. flex
Reveal answer Fill a bubble to check yourself
B Correct answer
Explanation

The flex-shrink property controls how flex items shrink when there is not enough space in the flex container. It can be set to a number, a percentage, or 0.

Multiple choice

What property is used to specify a shorthand for the flex-grow, flex-shrink, and flex-basis properties?

  1. flex-grow

  2. flex-shrink

  3. flex-basis

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

The flex property is a shorthand for the flex-grow, flex-shrink, and flex-basis properties. It can be set to a single value or a combination of values.

Multiple choice

What is the default value of the flex-wrap property?

  1. nowrap

  2. wrap

  3. wrap-reverse
Reveal answer Fill a bubble to check yourself
A Correct answer
Explanation

The default value of the flex-wrap property is nowrap, which means that flex items will not wrap to the next line when they reach the end of the flex container.