Category: JavaScript

Categories
Angular Answers

How to fix no base href set error with Angular router?

Labrador retriever puppy walking on green grass

Sometimes, we want to fix no base href set error with Angular router.

In this article, we’ll look at how to fix no base href set error with Angular router.

How to fix no base href set error with Angular router?

To fix no base href set error with Angular router, we add the base element into the index.html file.

For instance, we write

<head>
  <base href="/" />
  ...
</head>

to add the <base href="/" /> into the head element in index.html to clear the error.

Conclusion

To fix no base href set error with Angular router, we add the base element into the index.html file.

Categories
Angular Answers

How to get new selection in select in Angular?

Labrador retriever puppy walking on green grass

Sometimes, we want to get new selection in select in Angular.

In this article, we’ll look at how to get new selection in select in Angular.

How to get new selection in select in Angular?

To get new selection in select in Angular, we can watch the change event.

For instance, we write

<select (change)="onChange($event.target.value)">
  <option *ngFor="let i of devices">{{ i }}</option>
</select>

to add a select drop down.

Then in our component, we write

//...
export class Component {
  constructor() {}
  //...
  onChange(deviceValue) {
    console.log(deviceValue);
  }
}

to add the onChange method, which runs when we change selection since we have

(change)="onChange($event.target.value)

in the select.

Then we get the selected value from the parameter.

Conclusion

To get new selection in select in Angular, we can watch the change event.

Categories
Angular Answers

How to style child components from parent component’s CSS file with Angular?

Labrador retriever puppy walking on green grass

Sometimes, we want to style child components from parent component’s CSS file with Angular.

In this article, we’ll look at how to style child components from parent component’s CSS file with Angular.

How to style child components from parent component’s CSS file with Angular?

To style child components from parent component’s CSS file with Angular, we can set the encapsulation option.

For instance, we write

import { ViewEncapsulation } from "@angular/core";

@Component({
  //...
  encapsulation: ViewEncapsulation.None,
})
export class ParentComponent {
  constructor() {}
  //...
}

to set the ParentComponent‘s encapsulation option to ViewEncapsulation.None.

This will let the styles in ParentComponent propagate to its children.

Conclusion

To style child components from parent component’s CSS file with Angular, we can set the encapsulation option.

Categories
Angular Answers

How to use @ViewChild in *ngIf with Angular?

Labrador retriever puppy walking on green grass

Sometimes, we want to use @ViewChild in *ngIf with Angular.

In this article, we’ll look at how to use @ViewChild in *ngIf with Angular.

How to use @ViewChild in *ngIf with Angular?

To use @ViewChild in *ngIf with Angular, we set the static option to false and use a setter.

For instance, we write

<div id="layout" *ngIf="display">
  <div #contentPlaceholder></div>
</div>

to add a div with ref contentPlaceholder in the div that’s displayed when display is true.

Then in our component code, we write

export class AppComponent {
  display = false;
  private contentPlaceholder: ElementRef;

  @ViewChild("contentPlaceholder") set content(content: ElementRef) {
    if (content) {
      this.contentPlaceholder = content;
    }
  }
}

to add the setter by add a function after set.

Then when content, which is the element with the ref is defined, we set this.contentPlaceholder to content.

In Angular 8 or later, we add the static option by writing

export class AppComponent {
  display = false;
  private contentPlaceholder: ElementRef;

  @ViewChild("contentPlaceholder", { static: false }) set content(
    content: ElementRef
  ) {
    if (content) {
      // initially setter gets called with undefined
      this.contentPlaceholder = content;
    }
  }
}

to set static to false to watch for changes with the setter.

Conclusion

To use @ViewChild in *ngIf with Angular, we set the static option to false and use a setter.

Categories
Angular Answers

How to get current value of RxJS Subject or Observable?

Labrador retriever puppy walking on green grass

Sometimes, we want to get current value of RxJS Subject or Observable.

In this article, we’ll look at how to get current value of RxJS Subject or Observable.

How to get current value of RxJS Subject or Observable?

To get current value of RxJS Subject or Observable, we can use the first method.

For instance, we write

const observable = of("foo");

const hasValue = (value: any) => {
  return value !== null && value !== undefined;
};

const getValue = <T>(observable: Observable<T>): Promise<T> => {
  return observable.pipe(filter(hasValue), first()).toPromise();
};


//...

to create an of observable.

Then we create the getValue function that calls observable.pipe with the filter and first operators to get the first value from the observable that isn’t null or undefined.

And then we call toPromise to return a promise with the value returned by the observable.

Then in an async function, we write

const result = await getValue(observable);

to get the value.

Conclusion

To get current value of RxJS Subject or Observable, we can use the first method.