Angular

Question 1

What command do you use to install angular globally with npm?

Answer 1

Npm install -g @angular/cli

Question 2

What command do you use to create a new angular project?

Answer 2

ng new project-name

Question 3

What is in the component file for an angular component? What do these things look like?

Answer 3

1. Import Component library
2. Component declaration with selector, templateUrl, and styleUrls
3. Export Component

1.
import { Component } from ‘@angular/core’;

2.
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})

3.
export class AppComponent {
title = ‘angular-crash’;
}

Question 4

What is the selector name for in an angular component?

Answer 4

The selector name is the html tag you will use to place the component in an html document.

Question 5

Can you nest components within other components?

Answer 5

Yes, in fact, all other components will somehow be nested within the app component.

Question 6

When declaring a typeScript variable, how can you declare it so that the type is checked? String named title, with value “my title”.

Answer 6

title: string = “my title”

Question 7

How do you create a new header component using the command line?

Answer 7

ng generate component components/header

Question 8

How do you allow inputs to be passed into angular components?

Answer 8

In the components .ts file, add “Input” between the curly braces of the import statement. In the export statement, add a line “@Input() text: string;” if you want a variable named text as a prop (like in vue or react). When declaring the component in the html, use the inner html tag “text” and set it equal to whatever you want that variable to be.

Question 9

Is it possible to set the css style “background-color” to a component variable named “color”? If so, how?

Answer 9

Yes you can. In the inner html, type [ngStyle]=“{ ‘background-color’: color}”. The components variable named color will be set as the css background-color.

Question 10

How do you add a click event to an angular component? How do you redirect that click event to a parent function?

Answer 10

Type (click)=“onClick()” into the inner html. Create that method in the export class in the .ts file of that component.

If you want the button to be reusable, import Output and EventEmitter into the import curly braces. In the exported component class, write line “@Ouput() btnClick = new EventEmitter();” In the onClick() method, make it “this.btnClick.emit();” Clicking the button will now emit whatever parent function you set in that components inner html. So when declaring the component in the parent in this situation, include inner html that says (btnClick)=“parentFunction()”

Question 11

How do you create an interface that takes in mock JSON objects, converting them into angular objects? For an object named Task?

Answer 11

Create the Task interface in a separate .ts file:

export interface Task {
id?: number;
text: string;
day: string;
reminder: boolean;
}

Note: the question mark after id means it is an option value to include. Interface can be implemented with all of the fields except id in this case.

Make the mock tasks file:

import {Task} from ‘./Task’ <— interface we just made

export const TASKS: Task[] = [
{
id: 1,
text: ‘Doctor Appointment’,
day: ‘May 5th at 5 pm’,
reminder: true,
},
{…},
] <— continue and make full list

Generate a component called tasks in components/tasks:

assume default values are there. Then include:

import {Task} from ‘../../Task’
import {TASKS} from ‘../../mock-tasks’

Then in export class:

tasks: Task[] = TASKS;

Question 12

How do you loop through an array called “tasks” in angular?

Answer 12

In inner html of a paragraph for example:

*ngFor=“let task of tasks”

You can then use {{ task.text }} to print the tasks in the array. There’s a better way than just printing them in a paragraph though!

*ngFor=“let task of tasks” [task]=“task” on a task-item components inner html

You can make task components and pass the tasks into those components as a prop. Import Input and import Task interface and add @Input() task: Task; to the export class.

Modify the class component’s html to print the correct fields. Now you can add css to the task-item components css and every time you use the task-item tag, that css will apply.

Question 13

How do you add fontawesome to angular from the command line? How do you use it?

Answer 13

ng add @fortawesome/angular-fontawesome

Select all the free stuff so you don’t need to pay if you wish

Should show up in package.json and the import into the apps .ts should all be configured if using the Angular cli.

To use it, import appropriate icons. For example:

import { faTimes } from ‘@fortawesome/free-solid-svg-icons’;

Do this in component you want to use the icon. Then in the export class make line:

faTimes = faTimes;

Then in the html, make an fa-icon tag and include an inner html prop [icon]=“faTimes”.

Note: faTimes means font awesome times as in the multiplication symbol. Will be an x.

Can style the x icon using inner html [ngStyle]=“{ color: ‘red’}” for example

Question 14

How do you create an angular service called task? How do you use the service in a component? (Answer needs more info)

Answer 14

ng generate service services/task

You must import the service into the component and pass that service through the constructor:

constructor(private taskService: TaskService) {}

ngOnInit(): void {
this.taskService.getTasks().subscribe((tasks) => this.tasks = tasks));

}

This function assumes the service imported “Observable” and “of” from the ‘rxjs’ library, and the getTasks() function returns type Observable<Task[]> and does this:

const tasks = of(TASKS); <— mock json objects made before to make it an observable.
return tasks;