Lesson 14: 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...

TypeScript modifies JavaScript syntax to make it easier to use

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

TypeScript compiles your JavaScript to native code to improve performance

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

Classes

Template binder

Lexical Scope

Which best describes the role of a promise?

A promise guarantees that a value will not change

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

A promise allows us to execute some code asynchronously

Structure of an Angular application

What best describes the typical role of the root component?

It configures routing information for the application

It provides the compilation context for components

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

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

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

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

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

True

False

An Introduction to Angular Template Syntax

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

              [someProperty]="myVar"

              someProperty="{{myVar}}"

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

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

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

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

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

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

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

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

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

              <input [value]="myValue" />

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

              <input [ngModel]="myValue" />

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

```
              <p #myVar>
            
```

              <p let-myVar>

```
              <p myVar>
            
```

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

              <some-component class="myDirective">

              <some-component myDirective>

              It won't apply to either component

The *ngIf structural directive or @if syntax will...

Only render an element if the expression evaluates to true

Only render an element if the component has fully loaded

Only render an element if the component is on screen

The *ngFor structural directive or @for syntax will...

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

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

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

Understanding Decorators in Angular

A decorator could be best described as a way to...

Add additional styling to a component

Provide additional information about a class

Change the formatting of data within a component

One role of the @Component decorator is to...

Modify the behaviour of an existing component

Associate a class with a particular template

Transform values that are rendered in the template

Which of these best describe the role of a directive...

To trigger a method in a service

To transform values that are rendered in the template

To modify the behaviour of an existing element/component

A pipe allows us to...

Create a queue of components to render

Chain multiple method calls together

Transform values that are rendered in the template

Working with Components in Angular

An @Input() allows...

A parent component to pass values to a child component

A child component to pass values to a parent component

The old syntax for setting up an input is...

```
              @Input: name
            
```

              @Input() name

```
              @Input(name)
            
```

The new syntax for setting up an input is...

              name = input("josh")

              input("josh") name

              input("josh")

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

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

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

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

An Introduction to Signals

Which of these is NOT a benefit of signals

They will help prevent type errors

It will help improve change detection performance

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

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

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

              {{ mySignal }}

              {{ mySignal.value }}

              {{ mySignal() }}

Which of these is a way to create a signal?

              name = new Signal("Josh")

              name = signal("Josh")

              name = createSignal("Josh")

Which of these methods is NOT used to change a signals value?

              mySignal.change()

              mySignal.set()

              mySignal.update()

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

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

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

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

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

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

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

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

NgModules, Routing, and Standalone Components

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

Add it to the imports array of the module

Add it to the declarations array of the module

Add it to the providers array of the module

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

Components and directives

Components, directives, pipes, and providers

Components, directives, and pipes

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

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

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

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

Which is the best description of the SCAM approach?

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

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

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

Why would we export something from a module?

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

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

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

Understanding Dependency Injection in Angular

What is the correct way to inject MyService?

              constructor(private myService = new MyService())

              constructor(public myService: MyService)

              constructor(public MyService)

What is ALSO the correct way to inject MyService?

              inject(MyService) as myService

              myService = inject(MyService)

              myService = inject(new MyService())

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

It makes testing easier

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

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

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

              @Injectable({ providedIn: "root" })

              providers: [MyService] // in root module

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

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?

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

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

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

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?

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

Overwrite the input object with an entirely new object

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

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

              someObject.propertyToOverwrite = value

              someObject = {someObject, propertyToOverwrite: value}

Navigating and Passing Data Between Pages

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

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

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

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

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

Inject "Router" and call its "navigate" method

Inject "ActivatedRoute" and call its "navigate" method

The "Router" is available by default, so we can just call navigate without worrying about dependency injection

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

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

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

              {path: "define/:word"}

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

              ActivatedRoute

```
              Router
            
```

```
              Route
            
```

User Input and Forms in Angular

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

BasicFormsModule and AdvancedFormsModule

FormsModule and ReactiveFormsModule

FormsModule and TemplateFormsModule

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

Controls, Groups, and Arrays

Groups, Sections, and Controls

Controls, Validations, and Arrays

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

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

              {firstName: ['', required]}

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

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

              myForm.validators

```
              myForm.valid
            
```

              myForm.validated

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

```
              (ngSubmit)
            
```

```
              (submitted)
            
```

```
              (onSubmit)
            
```

Fetching Data from a Backend/API

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

```
              Http
            
```

```
              HttpClient
            
```

              HttpClientModule

What is the correct syntax for making an HTTP request?

              this.http.subscribe("someapi")

              this.http.request("someapi")

              this.http.get("someapi")

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.

Module Outline