画面が特定のブレークポイントを超えている場合は角度、divを表示する場合は別、別の場合は

Question

私のHTMLにはレイアウトが異なる2つのdivがあります。 一つはテーブルであり、他の一つは、いくつかのdiv

<div class="firstView> 
    <table class="table table-bordered">..... 
    .. 
    <tr *ngFor="let data of Data"> 
    <td>data.name</td> 
    </tr> 
    </table> 
</div> 

<div class="secondView"> 
    <div class="col-md-12" *ngFor="let data of Data"> 
    insert data here 
    </div> 

私は特定の画面サイズでそれらを表示または非表示するには、showと隠しを使用することができます。 しかし、私は両方のデータを読み込んでいるので、if文を持つことができればいいと思います。もしscreensx> 992px ならばfirstViewを表示してレンダリングします。

ngIfステートメントでブレークポイントを値として使用するにはどうすればよいですか？

Answer 1

実際に以前のアカウントを使用していたので、ここで正しいアカウントを使用して詳細を説明してください。あなたは変数にウィンドウ幅を保存したい場合は、次のように

だから、あなたは、単にチェックすることができ、あなたのマークアップでこの

class FooComponent implements OnInit { 

    public currentWindowWidth: number; 

    // ... 

    ngOnInit() { 
    this.currentWindowWidth = window.innerWidth; 
    } 

    // ... 
} 

のようなコンポーネントのコードを設定することができます。

<div class="first" *ngIf="currentWindowWidth < 992"> 
    ... 
</div> 
<div class="second" *ngIf="currentWindowWidth >= 992" > 
    ... 
</div> 

編集：

あなたがしても、次のようにあなたがそれを行うことができ、サイズ変更に反応するようにしたい場合は、次の

@HostListener('window:resize') 
onResize() { 
    this.currentWindowWidth = window.innerWidth 
} 

Answer 2

実際に* ngIfを使用してDOM要素自体を取り除く場合は、window.innerWidthを変数にバインドしてngOnInitにバインドし、これを使用して条件付きで* ngIfに基づいてコンテナを非表示にすることができます。

また、サイズ変更を気にする場合は、ホストのリスナーをウィンドウのresizeイベントにバインドし、起動時に変数を再割り当てすることもできます。