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}})
