Angular

What is *ngFor and how does it work?

*ngFor is an Angular-provided structural directive. It instantiates a template once per item from an iterable.

What is *ngIf and how does it work?

*ngIf is an Angular-provided structural directive. It conditionally includes a template based on the value of an expression

What are some of the files you can find in the root directory of an Angular 4 application as created by the Angular CLI

.angular-cli.json - Hold project name, version of CLI, etc. .gitignore - Should be committed into the repository, in order to share the ignore rules with any other users cloning the repository package.json - Tells which libraries will be installed into node_modules when you run npm install.

How would you add a new component to your project without the Angular CLI?

1. Create the component.ts file inside of the src folder. 2. Add the @Component decorator to the top of the class. 3. Import the component into the app.module.ts file. 4. Add a reference to the imported component into the @NgModule declarations attribute

How would you add a new service to your project without the Angular CLI?

1. Create the service.ts file inside of the src folder. 2. Import the service into the app.module.ts file. 3. Add the @Injectable decorator to the top of the class. 4. Add a reference to the imported service into the @NgModule providers attribute

How would you work with a form using the Template-Driven method?

1. Import the FormsModule from @angular/forms and add it to the imports attribute of @NgModule in app.module 2. Using the template-driven method, add the ngForm directive to the form. 3. You will then need to create the model form controls by adding the ngModel directive and the name attribute to each form input. 4. Bind an ngSubmit event listener to the form and set the value equal to the name of the function you want to execute. 5. inside of the component class, implement the function associated with ngSubmit().

How do you perform HTTP requests in Angular?

1. Import the HttpClient module and include it in the ngModule imports attribute. 2. Inject an object of type HttpClient inside of the constructor of the class you want to make an HTTPRequest in. 3. Use the HTTPClient property in your object and call one of the HTTPRequest functions included with HTTP client such as get() or post().

What are the two different ways that you can work with forms in Angular?

1. Template-Driven - Most of the work is done in the component template 2. Model-Driven - Most of the work is done in the component class

What is a pipe in Angular? What are some pipes that come with Angular?

A pipe takes integers, strings, arrays, and dates as input to be converted in the format as required and display the same in the browser. the input and pipe are separated by a vertical bar and wrapped by the double curly braces {{ x | pipe }}. Pipes that come with Angular include lowercase, uppercase, titlecase, and currency.

What is a Promise?

A promise is a placeholder for a future value.

What is an Observable?

An observable provides support for passing messages between publishers and subscribers in an application. A function is defined for publishing values, but is not executed until a consumer subscribes to it. They receive notifications until the function completes or the subscriber unsubscribes.

What is the Angular CLI?

Angular CLI is the Command Line Interface. It allows you to scaffold and build angular apps using NodeJS style modules. It also handles many common tasks for you, such as generating directives, services, and components.

What is Angular?

Angular is a TypeScript-based open-source front-end web application platform.

What are Angular services? What is an advantage of using services?

Angular services provide the ability to inject certain functionality into one or more components. An advantage of using services is that it cuts down on the amount of repetitive code you need to implement in every component.

What interface does a component class implement and what method does it require the class implement?

Component classes extend the OnInit interface, which requires that you provide an implementation for the ngOnInit lifecycle hook.

What are some of the different kinds of directives provided by Angular?

Components - Directives with a template Structural Directive - Change the DOM layout by adding and removing DOM elements. Examples include *ngFor and *ngIf Attribute Directive - Changes the appearance or behavior of an element, component, or another directive. An example would be ngStyle

What is @NgModule? What are some of the attributes inside of the @NgModule decorator?

Configures the injector and the compiler and help organize related things together. Attributes include: Declarations - Stores the references to components Imports - Stores the references to imported modules above Providers - Stores the references to the services created Bootstrap - Has the reference to the default component created (e.g. AppComponent); the bootstrapped component is created and inserted into the browser DOM.

What is event binding?

Event binding is used by directives and components to define element behavior for a particular event. Use the event emitter (event) = "behavior" to bind event behavior to the element.

What is data binding? What are some different data binding options provided through Angular?

Interpolation - One-way data binding from the component property to the component template. Put class property between double curly braces {{ x }} [(ngModel)] - Two-way data binding between the component property and the component template. Attribute Binding - Binds an attribute directive to an element. The directive is wrapped by square brackets [attrDirective]. Property Binding - Binds a component property to an attribute of an element (e.g., disable, hidden etc.).

Are Angular JS and Angular the same thing?

No. Angular JS (1) is based on JavaScript while Angular (2+) utilizes TypeScript, which is then transpiled to JavaScript. Angular JS is based on the MVC design pattern whereas Angular 2+ is based on a component structure.

What are some of the technologies you might include in your environment to create an Angular application?

NodeJS - A JavaScript runtime built on Chome's V8 JavaScript engine. NPM - Stands for Node Package Manager. It is the default package manager for NodeJS. Angular CLI - A command line interface used to scaffold and build angular applications.

What is the difference between a Promise and an Observable.

Observables are declarative (they don't execute until subscription) while Promises execute upon creation. Observables are cancellable, while Promises are not. Observables return many values while a promise only returns one value.

What is routing? Why does Angular implement its own routing module?

Routing refers to how the application will navigate between pages. Angular implements its own routing module in order to allow for single-page web applications.

What is @Component? What are some of the attributes inside of the @Component decorator?

The @Component decorator is added to the top of the component's class definition inside its component.ts file. Attributes include: selector - CSS selector that identifies this component in a template. stylesUrls - List of URLs to stylesheets to be applied to this component's view templateUrl - URL to an external file containing a template for the view

Where is the app folder located? What files does it contain if the project is created by the Angular CLI?

The app folder is located within the project's src folder. It contains the following files: app.module.ts - Contains references to different libraries used within the project app.component.css - Contains the CSS structure for the component. app.component.html. Contains the html template for the component. app.component.ts - Contains the class for the component. Holds the logic to manage the functionality of the component.

What is the ngOnInit() function?

The ngOnInit() function gets called by default in any component created. It contains the logic to be executed upon the initialization of a component.

What must you do in order to use Observables?

You must import the Observable from 'rxjs/observable' library

How would I include a component on another component's HTML template page?

You would use the component's selector inside of element tags (<app-comp></app-comp>)

What is the folder structure of an Angular 4 application as created by the Angular CLI?

e2e - The end-to-end test forlder mainly used for integration testing. node_modules - Where NPM packages are installed. src - Contains all of the files for the actual Angular project itself.

How would you add a new component to your project using the Angular CLI?

ng generate component <componentName> ng g c <componentName>

How would you add a new service to your project using the Angular CLI?

ng generate service <serviceName> ng g s <serviceName>

How would i create a new project using the Angular CLI?

ng new <project-name>

How would I start a server using the Angular CLI? What is the name and default port of this server?

ng serve. localhost:4200.

How would I check the version of Node on my computer? How about NPM?

node -v, npm -v.

What command would you use to install the Angular CLI using Node Package Manager locally? What about for global use?

npm install @angular/cli. Add -g for global usage.