Animate the angular page

Question

I have a home and register component. In home component, there is pagination floating from top to bottom on the rightmost side and a register button at the right. Its background color is yellow.

While clicking the register button then the home component should move to left until it reaches the middle of the page and the rightmost portion of the page is black in color(that is after yellow area).

Simultaneously, new register page data is navigated from bottom to the top in the yellow part and black part, but the pagination area always stays at the leftmost of the yellow area. When the register component is loaded completely the pagination should change the selection from 1 to 2.

I am doing angular animation for the first time. Currently, I have no idea about how can I start it. Please suggest a hint so that I can work on it

Answer 1

You can refer the docs here : https://angular.io/api/animations/transition

and here you can see some great examples : https://www.youtube.com/watch?v=ra5qNKNc95U

Basic Example to slide in/out from right side:

// In .ts file.
@Component({
  selector: 'app-alarm',
  templateUrl: './alarm.component.html',
  styleUrls: ['./alarm.component.css'],
  animations: [
    trigger('slideInOut', [
      state('in', style({
        transform: 'translate3d(0, 0, 0)'
      })),
      state('out', style({
        transform: 'translate3d(100%, 0, 0)'
      })),
      transition('in => out', animate('400ms ease-in-out')),
      transition('out => in', animate('400ms ease-in-out'))
    ]),
  ]
})
public menuState = 'out';



 toggleMenu() {

    if (!this.isOpened) {
      this.isOpened = true;
    } else {
      setTimeout(() => {
        this.isOpened = false;
      }, 500);

    }
    this.menuState = this.menuState === 'out' ? 'in' : 'out';
  }


// In html code.

<div class="side-bar " [@slideInOut]="menuState">
            <div class="btn-filter">
                <ul class="filter-panel" (click)="toggleMenu()" style=" left: -55px;">
                    <li *ngIf="menuState === 'out'"> <span class="glyphicon glyphicon-filter" aria-hidden="true"></span></li>
                    <li *ngIf="menuState !== 'out'"> <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></li>
                    <li *ngIf="menuState === 'out'"> <span>Filters</span></li>
                    <li *ngIf="menuState !== 'out'"> <span>Close</span></li>
                </ul>
            </div>
            <div class="portlet light  stats custom-portlet">
                <div class="portlet-title custom-title">
                    <div class="row">
                        <div class="col-lg-9">

                            <div class="caption">
                                <span class="glyphicon glyphicon-filter" aria-hidden="true"></span>
                                <span>Filters</span>
                            </div>

                        </div>
                        <div class="col-lg-3">
                            <span class="glyphicon glyphicon-remove-circle close-icon" aria-hidden="true" (click)="toggleMenu()"></span>
                        </div>
                    </div>
                </div>

            </div>
            <div style="padding:20px;">
                <form [formGroup]="filterForm">
                    <div class="form-group row">
                        <div class="col-lg-12 col-sm-11">
                            <label>Time Interval</label>
                            <input [selectMode]="'range'" [owlDateTimeTrigger]="dtPicker3" [owlDateTime]="dtPicker3"
                                class="form-control" formControlName="time_interval">
                            <owl-date-time #dtPicker3></owl-date-time>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-12 col-sm-11">
                            <label>Device Type</label>
                            <select class="form-control" formControlName="device_type" (change)="generateAlarmType($event.target.value)">
                                <option value="" [selected]="true">Select Device Type</option>
                                <option value="AP">AP</option>
                                <option value="Client">Client</option>
                                <option value="EMS">EMS</option>
                                <option value="WLC">WLC</option>

                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-12 col-sm-11">
                            <label>Alarm Type</label>
                            <select class="form-control" formControlName="alarm_type">
                                <option value="" [selected]="true">Select Alarm Type</option>
                                <option *ngFor="let i of alarmtype" value="{{i.value}}">{{i.type}}</option>
                            </select>
                        </div>
                    </div>



                    <!-- <div class="form-group row">
                     <div class="col-lg-12 col-sm-11">
                         <label>Status</label>
                         <select class="form-control" formControlName="status">
                             <option>Read</option>
                             <option>Unread</option>
                         </select>
                     </div>
                 </div> -->
                    <div class="form-group row">
                        <div class="col-lg-12 col-sm-11">
                            <label>Select severity Level</label>
                            <select class="form-control" formControlName="severity_level">
                                <option value="">Select severity Level</option>
                                <option value="Minor">MINOR</option>
                                <option value="Major">MAJOR</option>
                                <option value="Critical">CRITICAL</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-lg-12 col-sm-11 text-center">
                            <input type="button" value="Cancel" class="btn btn-cancel btn-large" (click)="reset()"
                                style="margin-right: 15px;">
                            <input type="button" value="Search" class="btn btn-theme btn-large" (click)="filter()">
                        </div>
                    </div>
                </form>
            </div>

        </div>