Search code examples
htmlcssangular-materialangular7

How to make bottom bar as given in image using angular material or angular?

I'm creating angular 7 application and designing UI. i want to fix bottom bar like below shown in image. only required middle circular icon leave that other thing. here is the bottom bar image

Solution

  • You can make a custom component using mat-toolbar, fab-button, a div and styling:

    Component template:

    <div class="fab-wrapper">
  <button mat-button mat-fab>
    <mat-icon>add</mat-icon>
  </button>
</div>
<mat-toolbar color="primary">
  <ng-content></ng-content>
</mat-toolbar>

    Component SASS:

    :host {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin-top: -36px;

  .fab-wrapper {
    width: 56px;
    height: 56px;
    position: relative;
    top: 36px;
    left: calc(50% - 36px);
    padding: 8px;
    border-radius: 36px;
    background-color: white;
  }
}

    This should get you started in the right direction.