Lesson 12: 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 need to supply the root component to the bootstrapModule method in main.ts

We must have a root component with a selector of app-root, it must be declared in the root module, and provided to the bootstrap property for the root module. The root module must also be passed to bootstrapModule in main.ts

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

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?

              <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 will...

Only render an element if the 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 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 proper syntax for setting up an input is...

```
              @Input: name
            
```

              @Input() name

```
              @Input(name)
            
```

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

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)

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 that need to use it

Change Detection: OnPush vs Default

What are the three main ways change detection can be triggered with the OnPush strategy?

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

A components 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