File

src/app/app.component.ts

Metadata

selector app-root
styleUrls app.component.css
templateUrl ./app.component.html

Index

Properties

Constructor

constructor(fb: FormBuilder)
Parameters :
Name Type Optional
fb FormBuilder no

Properties

options
options: FormGroup
Type : FormGroup
title
title: string
Type : string
Default value : 'app'
import { Component, Input } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'app';
  options: FormGroup;
  constructor( fb: FormBuilder){
    this.options = fb.group({
      'fixed': false,
      'top': 0,
      'bottom': 0,
    });
  }
}
<!--The content below is only a placeholder and can be replaced.-->

<!-- <ng-container > -->
 
  <!-- <mat-sidenav-container class="example-container">
    <mat-sidenav #sidenav mode="side" opened="true" class="example-sidenav"
                 [fixedInViewport]="options.value.fixed" [fixedTopGap]="options.value.top"
                 [fixedBottomGap]="options.value.bottom">
      {{options.value.fixed ? 'Fixed' : 'Non-fixed'}} Sidenav
    </mat-sidenav>

    <mat-sidenav-content [formGroup]="options">
      <p><mat-checkbox formControlName="fixed">Fixed</mat-checkbox></p>
      <p><mat-form-field>
        <input matInput type="number" formControlName="top" placeholder="Top gap">
      </mat-form-field></p>
      <p><mat-form-field>
        <input matInput type="number" formControlName="bottom" placeholder="Bottom gap">
      </mat-form-field></p>
      <p><button mat-button (click)="sidenav.toggle()">Toggle</button></p>
    </mat-sidenav-content>
  </mat-sidenav-container> -->
  <app-header></app-header>
  <ng-container >
  <router-outlet>

  </router-outlet>
  </ng-container>
  <app-footer></app-footer>
<!-- </ng-container> -->
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""