html – Angular Material icons styling-ThrowExceptions

Exception or error:

I am trying to align the controls in a line. I’ve tried different paddings/margins. How can I do this?

enter image description here

<div style="margin-top: 10px">
    <button (click)="goToPage(1)" [disabled]="pageNumber==1">
        <md-icon>first_page</md-icon>
    </button>
    <button (click)="previous()" [disabled]="pageNumber==1">
        <md-icon>chevron_left</md-icon>
    </button>
    <input #input type="text" style="width: 30px;height:30px;margin-top:2px" (keyup.enter)="goToPage(input.value)" [(value)]="pageNumber" >

    <button (click)="next()" [disabled]="pageNumber==totalPages">
        <md-icon>chevron_right</md-icon>
    </button>
    <button (click)="goToPage(totalPages)" [disabled]="pageNumber==totalPages">
        <md-icon>last_page</md-icon>
    </button>
    <br />

    <span>Showing page {{pageNumber}} of {{totalPages}} pages.
    </span></div>
How to solve:

you have two problems,

the first one is that your buttons are missing the angular material styling and the second one is that you should learn CSS before jumping to any javascript frameworks like Angular anyways I made a working demo on Plunker for you:

check it out : {{ HERE }}

enter image description here

I just added a few CSS selectors and I used flexbox just like this:

.wrapper{
    display: flex;
    margin: 1rem;
  }
  .wrapper button, input {
    margin: 0 0.5rem;
  }

I hope this helps and if you still have any questions just let me know

Leave a Reply

Your email address will not be published. Required fields are marked *