1.
you can type the following commands to run any example:
npm install
npm start
2. Make sure node.js, typescript and Angular CLI are installed
npm -v
tsc -v
ng --version
ng #to show the command list and get help
3. Run the below to create a new project from scratch
ng new angular-hello-world
4.
use the --port flag when running ng serve like this:
ng serve --port 9001
5. To create a new component using Angular CLI
ng generate component hello-world
6.
the ng serve command live-compiles our .ts to a .js file automatically.
Angular uses a concept called “style-encapsulation” which means that styles
specified for a particular component only apply to that component.
@Input() userId!: string;
Now, the compiler understands that this variable, although not defined at compile time, shall be defined at run-time, and in time, before it is being used.
<li *ngFor="let lolname of names">
<app-user-item [name]="lolname"></app-user-item>
</li>
define template between backticks(`...`) or sepearte file.
Apostrophe
7. When we run "ng serve", ng will look at the file angular.json to find the entry point to our app.
angular.json specifies a "main" file, which in this case is main.ts
main.ts is the entry-point for our app and it bootstraps our application
We use the AppModule to bootstrap the app. AppModule is specified in src/app/app.module.ts
8. The methods
return a boolean value of false (tells the browser not to propagate the event upwards)
9. deploy
ng build --prod --base-href /
hosting on now:
install now: npm install -g now
10.
any is the default type if we omit typing for a given variable. Having a variable of type any allows
it to receive any kind of value:
var something: any = 'as string';
something = 1;
11.
When methods don’t declare an explicit returning type and return a value, it’s assumed they can
return anything (any type).
In TypeScript you can have only one constructor per class.
.forEach is a method on Array that accepts a function as an argument and calls that
function for each element in the Array.
var data = ['Alice Green', 'Paul Pfifer', 'Louis Blakenship'];
data.forEach(function(line) { console.log(line); });
Fat arrow => functions are a shorthand notation for writing functions.
data.forEach( (line) => console.log(line) );
12.
@Input('shortName') name: string;
@Input('oldAge') age: number;
<my-component [shortName]="myName" [oldAge]="myAge"></my-component>
13.
To create a custom output event we do three things:
1. Specify outputs in the @Component configuration
2. Attach an EventEmitter to the output property
3. Emit an event from the EventEmitter, at the right time
14.
The line [class.selected]="isSelected(myProduct)" is a fun one: Angular allows us to set
classes conditionally on an element using this syntax. This syntax says “add the CSS class selected
if isSelected(myProduct) returns true.” This is a really handy way for us to mark the currently
selected product.
15.
Here when we say @HostBinding('attr.class')
cssClass = 'item'; we’re saying that we want to attach the CSS class item to the host element. The host is the
element this component is attached to.
16.
<span *ngFor="let name of product.department; let i=index">
17.
<div [style.background-color]="'yellow'">
Uses fixed yellow background
</div>
<div [ngStyle]="{color: 'white', 'background-color': 'blue'}">
18.
A FormControl represents a single input field - it is the smallest unit of an Angular form.
FormControls encapsulate the field’s value, and states such as being valid, dirty (changed), or has errors.
<input type="text" [formControl]="name" />
19.
if you import FormsModule, NgForm will get automatically attached to any <form> tags you have in your view.
This is really useful but potentially confusing because it happens behind the scenes.
No comments:
Post a Comment