JavaScript & Angular (Week 4 with Ashley's
help) With complete solutions latest update
Angular Directive
What they are:
- Extended HTML attributes with the ng-prefix.
How do we use them and what do they do?
- A way we can invoke Angular functionality within a html file.
- They act as syntax that can be used in html format without breaking the
front end.
Angular
, Solution 2024/2025
Pepper
What is it?
- A TypeScript-based open-source front-end web application framework
mainly maintained by Google.
How is it used?
Pairs with Node.js to create a front and back-end structural framework for
building dynamic web apps.
Why is it useful?
It lets you use HTML as your template language and implements features
such as data binding and dependency injection.
What is linting?
- Linting is the process of running a program that will analyze code for
potential errors.
What does the asterisk(*) mean in front of ngIF/ngFor?
- Any directive that has an asterisk means that it is a structural directive.
- This means that the directive in question will acutally manipualte the html
directly.
- Will be capable of physically deleting or adding HTML on the spot for us.
Angular Interpolation
What does it do?
- Displays a component property by binding the property name
How is it used?
- With interpolation, you put the property name in the view template,
enclosed in double curly braces as such: {{myHero}}.
Typescript Class with Array (example syntax)
, Solution 2024/2025
Pepper
export class AppComponent {
title = 'Tour of Heroes';
heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
myHero = this.heroes[0];
}
This will select Windstorm... whoever that is.
*ngFor
The ngFor structual directive is used to access each item in the list:
In the template:
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
<p>Heroes:</p>
<ul>
<li *ngFor="let hero of heroes">
{{ hero }}
</li>
</ul>s
How do you reference objects or elements not specific to the one you are
using?
1) You import them into app.module.ts with:
import {ClassName} from 'location/of/class';
EXAMPLE:
import {NgModule} from
'@angular/core';
import {AppComponent} from
'./app.component';
, Solution 2024/2025
Pepper
2) AND add them to the imports
What is a module?
A module is a collection of components, services, directives, that are
bundled together as a separate piece of application that can be plugged or
removed from a main application without issue.
What are pipes?
What are they?
- A convenient and reusable way to transform data within a template. i.e.
formatting dates, formatting currencies, filtering and ordering a list, etc.
How do I use them?
1) Add the "|" character and the name of the pipe you want to use after an
angular template expression.
2) Similar to using directives you will need to specify which pipes are
available to this component.
What does a module component expect?
1) Declarations:
Any components being used must be declared in the module before use.
2) Imports:
Used for bringing in other modules for use.
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller Schoolflix. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $14.49. You're not tied to anything after your purchase.
