Basic Angular Knowledge Review (Mega Quiz)

Basic Angular Knowledge Review (Mega Quiz)

This lesson contains all of the recap quizzes from all of the lessons in this module. I have added headers to each group of quizzes so that you know which lesson to go back and study if you get stuck. Good luck!

TypeScript and ES6 Concepts

Which of the following best describes TypeScript…

1. TypeScript modifies JavaScript syntax to make it easier to use

2. TypeScript adds types to JavaScript to help catch errors and enable code completion

3. TypeScript compiles your JavaScript to native code to improve performance

Check

What ES6 concept is used to help display/bind values and events to an Angular component’s template?

1. Classes

2. Template binder

3. Lexical Scope

Check

Which best describes the role of a promise?

1. A promise guarantees that a value will not change

2. A promise allows us to mark methods that have not been implemented yet, but will be later

3. A promise allows us to execute some code asynchronously

Check

Structure of an Angular application

What best describes the typical role of the root component?

1. It configures routing information for the application

2. It provides the compilation context for components

3. It is the root of our component tree and all other components in our application are displayed within it

Check

What is required in order to use the app-root tag in our index.html file?

1. We must define a root component named AppComponent so that Angular can automatically detect it

2. We need to bootstrap a root component in the main.ts file

Check

The only way to display a component is to configure a route for it

1. True

2. False

Check

An Introduction to Angular Template Syntax

The best syntax for binding a variable to a property is…

1. [someProperty]="myVar"

2. {{myVar}}

Check

If we want to bind a click event to some method we would do…

1. <some-component event="click" trigger="myMethod()">

2. <some-component (click)="myMethod()">

3. <some-component onClick="myMethod()">

Check

If we wanted to render out the result of 1 + 1 in the template, which of the following would work?

1. <h1>[1 + 1]</h1>

2. <h1>{1 + 1}</h1>

3. <h1>{{1 + 1}}</h1>

Check

What is the correct way to set up two way data binding for a form control?

1. <input [value]="myValue" />

2. <input [(ngModel)]="myValue" />

3. <input [ngModel]="myValue" />

Check

What is the correct way to set up a template variable?

1. <p #myVar>

2. <p let-myVar>

3. <p myVar>

Check

Select the component that a directive with a selector of [myDirective] would apply to

1. <some-component class="myDirective">

2. <some-component myDirective>

3. It won’t apply to either component

Check

The *ngIf structural directive or @if syntax will…

1. Only render an element if the expression evaluates to true

2. Only render an element if the component has fully loaded

3. Only render an element if the component is on screen

Check

The *ngFor structural directive or @for syntax will…

1. Loop over an array and trigger a method for each element in the array

2. Loop over an array and render an element for each element in the array

3. Loop over an array until the element matching the condition is found

Check

Understanding Decorators in Angular

A decorator could be best described as a way to…

1. Add additional styling to a component

2. Provide additional information about a class

3. Change the formatting of data within a component

Check

One role of the @Component decorator is to…

1. Modify the behaviour of an existing component

2. Associate a class with a particular template

3. Transform values that are rendered in the template

Check

Which of these best describe the role of a directive…

1. To trigger a method in a service

2. To transform values that are rendered in the template

3. To modify the behaviour of an existing element/component

Check

A pipe allows us to…

1. Create a queue of components to render

2. Chain multiple method calls together

3. Transform values that are rendered in the template

Check

Working with Components in Angular

An input allows…

1. A parent component to pass values to a child component

2. A child component to pass values to a parent component

Check

The old syntax for setting up an input is…

1. @Input: name

2. @Input() name

3. @Input(name)

Check

The new syntax for setting up an input is…

1. name = input("josh")

2. input("josh") name

3. input("josh")

Check

How can you use data from a child component in a parent component?

1. Have the child component emit on one of its outputs, and bind to that output event in the parent component

2. Have the child component modify data in a shared injectable service, and then the parent component can access the data through the same service

3. Call one of the methods of the parent component directly from the child component

Check

An Introduction to Signals

Which of these is NOT a benefit of signals

1. They will help prevent type errors

2. It will help improve change detection performance

3. They provide us with a mechanism to run code when specific values change

4. They provide us with a way to calculate values that are automatically updated

Check

How do you access the value of a signal in the template?

1.       {{ mySignal }}

2.       {{ mySignal.value }}

3.       {{ mySignal() }}

Check

Which of these is a way to create a signal?

1.       name = new Signal("Josh")

2.       name = signal("Josh")

3.       name = createSignal("Josh")

Check

Which of these methods is NOT used to change a signal’s value?

1.       mySignal.change()

2.       mySignal.set()

3.       mySignal.update()

Check

Which of these best describe the role of a computed signal?

1. A computed value can be calculated based on the values of other signals, and it will be updated when those signals change their value

2. A computed is a way to calculate a value based on a snapshot of the current signals value, and it will not be affected by future updates

3. A computed is a way to increment signals that deal with numerical values

Check

Which of these best describe the role of a signal effect?

1. An effect allows us to trigger animations or other visual effects when a signals value changes

2. An effect allows us to execute arbitrary code whenever any signal value it references changes

3. An effect will enforce that a signal can only be within a certain range of values

Check

NgModules, Routing, and Standalone Components

If we want to make a component available to use within a module we can…

1. Add it to the imports array of the module

2. Add it to the declarations array of the module

3. Add it to the providers array of the module

Check

Which of the following contains an exhaustive list of all declarables (i.e. they can be added to the declarations array of a module)?

1. Components and directives

2. Components, directives, pipes, and providers

3. Components, directives, and pipes

Check

What best describes what happens when we import one module into another module?

1. The module being imported will be loaded, but the features within that module will not be available to use in the module it is being imported into

2. Everything in the module being imported becomes available to the module it is being imported into

3. Anything exported by the module being imported can be used in the module it is being imported into

Check

Which is the best description of the SCAM approach?

1. For every component/directive/pipe we create, we create a corresponding module that declares and exports that component/directive/pipe

2. Instead of creating modules for each component/directive/pipe we can just import them directly into the module we want to use them in

3. We group related components/directives/pipes together into a single module, and import that module wherever we need to use those components/directives/pipes

Check

Why would we export something from a module?

1. To automatically make whatever we are exporting available in the root module

2. To make whatever we are exporting available inside of whatever module imports this module

3. Components/directives/pipes are not useable unless they are both declared and exported

Check

Understanding Dependency Injection in Angular

What is the correct way to inject MyService?

1.       constructor(private myService = new MyService())

2.       constructor(public myService: MyService)

3.       constructor(public MyService)

Check

What is ALSO the correct way to inject MyService?

1.       inject(MyService) as myService

2.       myService = inject(MyService)

3.       myService = inject(new MyService())

Check

Which of the following is NOT a benefit of dependency injection?

1. It makes testing easier

2. It means we do not need to manually pass in all of dependencies for another dependency through its constructor

3. It will make sure the same dependency is never created more than once

Check

What is the best way to configure sharing a single instance of a dependency with the entire application

1. @Injectable({ providedIn: "root" })

2. providers: [MyService] // in root module

3. // in all modules/components that need to use it
   providers: [MyService]

Check

Change Detection: Signals vs OnPush vs Default

What are the three main ways a component can be marked to be checked with the OnPush strategy?

1. An event binding being triggered, a components input reference changing, and the async pipe

2. A component’s input is mutated, an event binding being triggered, and the async pipe

3. A setTimeout or setInterval is triggered, an HTTP request completes, and a promise resolving

Check

If a component has an object as an input, what do you need to do to make sure changing the values in that object triggers change detection with the OnPush strategy?

1. Mutate the object by re-assigning one of its properties directly

2. Overwrite the input object with an entirely new object

Check

How should we update the propertyToOverwrite value of an object if we are using the OnPush strategy?

1. someObject = {...someObject, propertyToOverwrite: value}

2. someObject.propertyToOverwrite = value

3. someObject = {someObject, propertyToOverwrite: value}

Check

Navigating and Passing Data Between Pages

What is the correct way to navigate to another route in Angular from the template?

1. <a href="/settings">Settings</a>

2. <a routerLink="/settings">Settings</a>

3. <a navigate="/settings">Settings</a>

Check

What is the correct way to navigate to another route in Angular from the class?

1. Inject “Router” and call its “navigate” method

2. Inject “ActivatedRoute” and call its “navigate” method

3. The “Router” is available by default, so we can just call navigate without worrying about dependency injection

Check

If we want a route to accept a parameter called ‘word’ on a route called ‘define’ how would we set that up?

1. {path: "define/${word}"}

2. {path: "define/{{word}}"}

3. {path: "define/:word"}

Check

If we wanted to get access to the ‘word’ param on our ‘define’ page what should we inject into our component?

1. ActivatedRoute

2. Router

3. Route

Check

User Input and Forms in Angular

What are the two form modules we can import from Angular?

1. FormsModule and TemplateFormsModule

2. FormsModule and ReactiveFormsModule

3. BasicFormsModule and AdvancedFormsModule

Check

The three main types of form controls we can create are…

1. Controls, Groups, and Arrays

2. Groups, Sections, and Controls

3. Controls, Validations, and Arrays

Check

What is the correct way to make a field required using FormBuilder?

1. {firstName: ['', Validators.required()]}

2. {firstName: ['', Validators.required]}

3. {firstName: ['', required]}

Check

What property of a form group can we use to check if all the validators have passed?

1. myForm.validators

2. myForm.valid

3. myForm.validated

Check

What event can we bind to on a form element to handle a submission?

1. (ngSubmit)

2. (onSubmit)

3. (submitted)

Check

Fetching Data from a Backend/API

What needs to be injected in order to make an HTTP request?

1. Http

2. HttpClient

3. HttpClientModule

Check

What is the correct syntax for making an HTTP request?

1. this.http.get("someapi")

2. this.http.request("someapi")

3. this.http.subscribe("someapi")

Check

Congratulations!

Nice work completing this module! You can go back and study if you got any of these questions wrong if you like, but it isn’t necessary to continue. You aren’t going to absorb everything all at once, so feel free to continue on to the next module and come back again later if you need.