How to Change the content of pageSizeOptions in Material Paginator

Question

Firstly, show my angular code:

ts:

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit, AfterViewInit{

  dataSource = new MatTableDataSource<Ticket>();
  ticketList: Ticket[] = [];
  originalTicketList: Ticket[] = [];
  displayedColumns = ['id', 'findingSourceSystem', 'label', 'caseStatus', 'caseCreateTimestamp', 'resolvedBy', 'resolution', 'resolutionNote'];
  filterAllForm: FormGroup;

  maxall : number = 100;


  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: false }) sort: MatSort;

  constructor(private ticket: TicketService,
    private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.filterAllForm = this.formBuilder.group({
      startDate: [''],
      endDate: ['']
    });
    this.getAllLabels();
    this.getAllTicket();
    this.getAllUniqueLabels();

  }

  ngAfterViewInit(){
    this.dataSource.sort =  this.sort;
    this.dataSource.paginator = this.paginator;
    this.getPageSizeOptions();

  }
  getPageSizeOptions(): number[] {
    if (this.dataSource.data.length>this.maxall){
      return [20, 50, this.dataSource.data.length];
    }else{
      return [20, 50, this.maxall];
    }
  }
/* some business logic*/
}

and html file have one line after mat-table

<table mat-table matTableExporter [dataSource]="dataSource" matSort class="mat-elevation-z8"
</table>
 <mat-paginator [pageSizeOptions]="getPageSizeOptions()" showFirstLastButtons></mat-paginator>

Here I use getPageSizeOptions() to calculate the max page size. it will display like this:

How can I replace this "1647" with "all" I referred to How to add 'All' option for Angular Material paginator? . But it doesn't work.

I think it may be some scss style changes, but how? mat-option:last-child seems isn't working for me

Answer 1

All looks fine and referred answer is also working fine. But if your changes are not reflecting in browser than you need to do something as following points..

• You need to Hard Reload (ctrl+shift+R) your browser, clean Cache and History.
• Add CSS into dashboard.component.scss file.
• if still not working than put !important with your css property

like this..

 mat-option:last-child:before{
    content: 'All' !important;
    float: left;
    text-transform: none;
    top: 4px;
    position: relative;
}

mat-option:last-child .mat-option-text{
  display: none;
  position: relative;
}

Answer 2

If we write css style( mat-option ) in class file it will be overridden. So in order to avoid this we have to add global css for mat-option

style.scss or style.css (file exists as same levele as ( index.html ))

.mat-option:last-child:before{
   content:'all';
   // background:green;
   font-size: inherit;
   line-height: 3em;
   height: 3em;
 }

 .mat-option:last-child .mat-option-text {
    display: none;
    position: relative;
 }