Basics V1 Flashcards
How to “select” elements which aren’t valid as yet to apply specific styling?
You can follow this pattern for example:
input.ng-invalid {
border: 1px solid red;
}
select.ng-invalid {
border: 1px solid red;
}
Notice we are appending .ng-invalid to the specific elements otherwise without the specific elements at the beginning all elements will have the styles applied.
input.ng-invalid.ng-touched {
border: 1px solid red;
}
With .ng-touched included, styles won’t be applied until after the user has “touched” the element and it’s still in an invalid state.
How to show validation message specific to an element?
< input
class="form-control"
id="email"
name="email"
ngmodel
required
type="email"
#email = "ngModel"
/>
< span
class=”help-block” *ngIf=”!email.valid”>
Please enter a valid email!
< /span >
Notice the reference #email is assigned by the ngModel
How to apply a default value to a form control/element?
//Template
< select
id="secret"
class="form-control"
[ngModel]="defaultQuestion"
name = "secret"
>
//Component // we just define a variable. defaultQuestion = "Name of pet?"
Once routing is set up, how to activate?
place in the component where routing is set up, which will activate routing for it’s children.
Using Angular router, how to apply an active class to each menu item?
place routerLinkActive=”active” on the parent tag of the links.
eg.
< ul class="nav navbar-nav" >
< li routerLinkActive="active" >
< a routerLink = "/recipes" >Recipes< /a>
< /li>
< li routerLinkActive="active">
< a routerLink = "/shopping" >Shopping< /a>
< /li>
< /ul>
With anchor tags and utilising angular routing, what do you need to make sure of?
href’s are removed on the anchor tag and to make sure that style=”cursor:pointer;” is placed on the parent elementto give the hand feature on the link.
eg.
< a class=”list-group-item” style=”cursor:pointer” *ngFor=”let ingredient of ingredients” >
Get a route parameter passed in once only.
ngOnInit(): void {
const id = this.route.snapshot.params['id'];
}
…and don’t forget to inject the ActivatedRoute in through the constructor to gain access to route.
Listen for anytime a new route parameter is passed in and react to those changes.
ngOnInit(): void {
const id = this.route.params.subscribe( (params:Params) => { this.id = +params['id'] } )
}
...and don't forget to inject the ActivatedRoute in through the constructor to gain access to route. // the + is parsing the value to an int.
With Angular router, what do you need to do to routerLink if you want to bind dynamic segment in the path?
need to put it in array syntax. eg. [routerLink] = “”
For parent to child, when passing values via components, what’s the rule to remember?
Left is receiving component, right is value passed in… And if you bind it, you don’t need to “pass” it in via a constructor or set it on ngOnInit.
With routing, does the order in which you define the routes matter?
Yes!
As below, if new was placed below the :id route, then angular would be confused if you went recipes/new. But if it’s above, then you can go recipes/new without any worries.
{ path: ‘recipes’, component: RecipesComponent, children: [
{ path: ‘’, component: RecipeUnselectedComponent },
{ path: ‘new’, component: RecipeEditComponent },
{ path: ‘:id’, component: RecipeDetailComponent },
{ path: ‘:id/edit’, component: RecipeEditComponent }
] }
How do you prevent memory leaks with observables?
Use the Subscription in memory method.
Meaning define your subscription to a variable at the top then use it where you need.
NOTE: Don’t need to do this for observables provided by the angular package or features of angular.
ANOTHER NOTE: Ensure you’re including the right things in ngOnDestroy also.
When working with observables, when would you include .pipe(map(data) => {}) or any other operator which would change the format of the data that you want to receive.
Before calling the .subscribe method on it.
What was the traditional way to emit events across components ?
Using a service with eventEmitter where the service has the EventEmitter and the receiving component subscribes to it.
eg in Service. // definition ingredientsChanged = new EventEmitter();
// emission this.ingredientsChanged.emit(this.ingredients.slice());
eg in Receiving Component // service injected into constructor
constructor(private slService: ShoppingListService) { }
// subscribe to service
this.slService.ingredientsChanged.subscribe((ingredients: Ingredient[]) =>
{ this.ingredients = ingredients; });
// displaying in the template of receiving component
{{ingredient.name}} ({{ingredient.amount}})
What is the new way / recommended way to emit events across components?
Using subjects.
eg in Service // definition ingredientsChanged = new Subject();
// emission - notice the .next call instead of .emit this.ingredientsChanged.next(this.ingredients.slice());
// subscribe to service
this.slService.ingredientsChanged.subscribe((ingredients: Ingredient[]) =>
{ this.ingredients = ingredients; });
// displaying in the template of receiving component:
{{ingredient.name}} ({{ingredient.amount}})
What does a “control” refer to in the context of Angular forms
It refers to what is in the JS object which Angular creates as a representation upon detecting the element.
NOTE: not all elements within the form are “controls”, only what is inside the hidden JS object.
Whats a good way to think about how Angular handles a TD form?
When Angular detects a element, it creates a Javascript representation of that form which can’t be seen.
Angular will not automatically detect changes within the form.
With a TD form, how do you specify which elements/inputs you want as controls in the form. eg. which elements do you want included in the JS representation of the form?
Include ngModel (alone) and a name such asname=”username” on the element.
// example < input type="text" id="username" class="form-control" ngModel name="username" >
How do you make an Angular TD form submittable? (the non-ViewChild way)
To the form element in the template, add: (ngSubmit)=”onSubmit()”
// Example implementation: < form (ngSubmit)="onSubmit()" >
In the .ts file (code behind) you’d obviously have the onSubmit function defined. This is how Angular takes advantage of the original way forms are submitted.
//eg in your component
onSubmit(form: NgForm){
console.log(this.signupForm);
}
How do you pass through the form data when a user submits a form?
//Add a reference on the form element and then pass it in eg. < form (ngSubmit)="onSubmit(f)" #f >
//Then you can receive it in the .ts file with the following:
onSubmit(form: HTMLFormElement) {
console.log("Submitted");
}
If you want to go even further you can use this trick assigning #f by ngForm which provides access to the JS representation of the form.
< form (ngSubmit)=”onSubmit(f)” #f=”ngForm” >
eg. The values from the form then will be found on the value property of that NgForm object.
How does navigating programatically work?
// Template < button class="btn btn-primary" (click)="onLoadServer()">Load Server 1
//Inject in the component constructor
(private router : Router){ }
//Component
onLoadServer(){
this.router.navigate(['/servers']);
}
Remember that by default the router.navigate method does not know which route the user is on. The routerLink always knows in which component/route it sits.
Angular router: Relative path vs Absolute path
// The slash is the difference.
Relative path: [‘servers’]
Absolute path: [‘/servers’]
How do you change the default for the this.router.navigate method to ensure it knows in which component it sits (by default it doesn’t know)
//Inject in the component
constructor(private serversService: ServersService,
private router: Router,
private route: ActivatedRoute) {
}
// NOTE: ActivatedRoute injects the current route into the
// component.
constructor(private router : Router, private route: ActivatedRoute){ }
//Method // 1. notice the additional relativeTo property // 2. notice the path is relative, eg. no slash in path. //3. notice the route injected above passed here
onLoadServers(){ this.router.navigate([‘servers’], {relativeTo: this.route }) }
How do you pass a parameter into a path using Angular router?
'users/:id' // The colon ':' tells angular that this part will be a dynamic part of the path.
// NOTE: this allows you to encode data into your path. Then to receive it, you can use a snapshot (single receive) or a route observable (multiple receive)
