この記事に影響を受けた
こんな感じで使いたい
<when-gt-sm>
<p>gt-sm</p>
</when-gt-sm>
<when-lt-md>
<p>lt-md</p>
</when-lt-md>実装方針としては条件判定用のコンポーネントを作りng-contentで表示するコンポーネントを外から指定出来るようにする。 ReactでいうChild Componentと同じ。
import { Component } from '@angular/core';
import { MediaObserver } from '@angular/flex-layout';
@Component({
selector: 'when-gt-sm',
template: `
<ng-container *ngIf="mediaObserver.isActive('gt-sm')">
<ng-content></ng-content>
</ng-container>`,
})
export class WhenGtSmComponent {
constructor(public mediaObserver: MediaObserver) {}
}サンプルでは@angular/flex-layoutを使用しているが、実際には何を使ってもいい。
条件単位でコンポーネントを作成するか参考にした記事の様に条件を外から渡す実装方法があるが、
そこまで複雑な条件を指定するケースが無かったので今回はシンプルに条件単位でコンポーネントで実装した。
参考