Latest tips / 7

There are several ways to hide an element in CSS. display: none completely hides the element from view. visibility: hidden hides the element from view, but the element still occupies space in the layout.

The content-visibility property allows you to hide the content of an element, but not the element itself. Some styling like background and border will still be visible.

.element {
  content-visibility: hidden;
}

See MDN Web Docs for more information and Browser support.

Angular uses the @Output decorator and the EventEmitter class to emit events to the parent component. But you can use RxJS streams instead.

The EventEmitter class is actually a wrapper around the RxJs Subject class. If you have an existing Subject or Observable that you want to use as an output, you can directly use it with the @Output decorator.

export class SearchComponent {
  // With Angular EventEmitter
  @Output()
  search = new EventEmitter<string>();

  // With RxJs Subject / Observable
  @Output()
  search = this.form.valueChanges.pipe(
    debounceTime(500),
    map((value) => value.term),
    distinctUntilChanged()
  );
}

Most CSS properties require a unit, for example padding: 10px. If you use 0 you can omit the unit, like padding: 0.

An exception is the calc() function, which always requires a unit, even for 0.

.example-class {
  padding: 0; /* works */

  height: calc(100vh - 0); /* does NOT work */
  height: calc(100vh - 0px); /* works */
}

That is mainly important if you use CSS custom properties (aka variables) with a default value of 0 inside calc():

.example-class {
  height: calc(100vh - var(--header-height, 0)); /* does NOT work */
  height: calc(100vh - var(--header-height, 0px)); /* works */
}

The Exclude type in TypeScript is a way to exclude certain types from a union.

Let's say you use a third-party package that exports a function with an optional parameter. The parameter uses an inline type which is not exported:

export function fetch(sortBy?: "name" | "date" | "rating") {}

You now want to extract the type of sortBy but exclude undefined from the union (undefined is allowed because the param is optional).

You can use Parameters<T> to get the parameters of the function and Exclude<T> to exclude undefined:

type SortBy = Exclude<Parameters<typeof fetch>[0], undefined>;
// Results in: type SortBy = "name" | "date" | "rating"

Data Binding in Angular Templates binds to properties not attributes. As aria-* attributes are not properties, they cannot be bound to. If you want to bind to aria attributes, you need to use the [attr.aria-*] syntax.

<!-- Does NOT work -->
<div [aria-hidden]="isHidden">
  <!-- ... -->
</div>

<!-- Works -->
<div [attr.aria-hidden]="isHidden">
  <!-- ... -->
</div>