Angular FlexLayout

https://alligator.io/angular/flex-layout/


https://alligator.io/angular/flex-layout/


Instalación:

npm install @angular/flex-layout --save

import { FlexLayoutModule } from "@angular/flex-layout";

agregar en imports:

FlexLayoutModule


Ejemplo:

<mat-card>
    <div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0%" fxLayoutAlign="center">
        <div fxFlex="60%" style="background-color: gray;">
           
            <form (ngSubmit)="login()">
                <div>   
                    <mat-form-field>
                        <input matInput placeholder="Usuario" [(ngModel)]='usuario' name='usuario'>
                    </mat-form-field>         
                </div>

                <div>   
                    <mat-form-field>
                        <input matInput placeholder="Password" [(ngModel)]='password' name='password' type="password">
                    </mat-form-field>         
                </div>

                <button mat-raised-button color="primary" type="submit">Enviar</button>
            </form>                   
        </div>

        <div fxFlex="40%" style="background-color: lightyellow;">
            Ingrese sus datos
        </div>
    </div>
</mat-card>