Issue

I am in new in angular 9. I am currently working on angular 9 pagination. Please Help Me..
Angular 9 pagination into HTML table using ngx-pagination.

src/app/app.component.html:20:17 – error TS2322: Type ‘String’ is not assignable to type ‘string | number’.
Type ‘String’ is not assignable to type ‘string’.
‘string’ is a primitive, but ‘String’ is a wrapper object. Prefer using ‘string’ when possible.

Error image – enter image description here

app.component.ts

import { Component } from '@angular/core';
import { RandomUserService } from './services/random-user.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
data:Array<any>
totalRecords:String
page:Number =1

  title = 'pgAng';
  constructor(private randomUser:RandomUserService)
  {
    this.data = new Array<any>()

  }
  ngOnInit() {
		console.log('gggg');
        this.getUsers();
    }
 
  getUsers(){
    this.randomUser.getData().subscribe((data)=>{
    console.log(data)
    this.data = data.results
    this.totalRecords = data.results.length
    console.log(this.page)
    })

  }
}

app.component.html

<!-- npm i ngx-pagination-->
<div class="container">

<button type="button" (click)="getUsers()" class="btn btn-danger">Get Users</button>


<table class="table table-striped">
  <thead>
  <tr>
  <th>Gender</th>
  <th>Name</th>
  <th>Email</th>
  <th>Picture</th>
  </thead>
  <tbody>
    <tr *ngFor="let user of data | paginate: { id: 'listing_pagination',
    itemsPerPage: 10,
    currentPage: page,
    totalItems: totalRecords }">

  <td>{{user.gender}}</td>
<td>{{user.name.first}}</td>
<td>{{user.name.email}}</td>

<td><img src="{{user.picture.medium}}"></td>
  </tr>
  </tbody>
  </table>

  <div>
		<pagination-controls  id="listing_pagination" maxSize="5" directionLinks="true" (pageChange)="page = $event"></pagination-controls>
	</div>

</div>

random-user.service

import { Injectable } from '@angular/core';
import{HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class RandomUserService {

  constructor(private http:HttpClient) { }
  getData():Observable<any>{
    const url ="https://randomuser.me/api?results=100"
    return this.http.get<any>(url)
  }
}

Solution

The message is self-explanatory.

src/app/app.component.html:20:17 – error TS2322: Type ‘String’ is not assignable to type ‘string | number’. Type ‘String’ is not assignable to type ‘string’. ‘string’ is a primitive, but ‘String’ is a wrapper object. Prefer using ‘string’ when possible.

This is saying that you have declared a property to be of type String, but you are assigning that property to a type that is declared as string | number.

In Typescript, the type string | number means that you expect the property to be of either type string or type number.

In Javascript, String is a class wrapper around the primitive string type. The 2 are not the same. One difference is that String uses reference equality, whereas string uses value equality.

const s1 = 'abc';
const s2 = 'abc';

const S1 = new String('abc');
const S2 = new String('abc');

console.log('literals match: ', s1 === s2);
console.log('wrappers match: ', S1 === S2);

The solution

Firstly, it should be noted that this is only a Typescript compile time error. When the code is compiled to Javascript, there are no such thing as declared types.

You should amend your property type declarations to use the primitive types.

totalRecords: number; // change String ->number
page: number = 1;     // change Number -> number. 
                      // Type declaration is redundant when assigning 
                      // from a literal

You are setting totalRecords from data.results.length, so you know it’s a number. If it were a string you would declare it as a string.

Answered By – Kurt Hamilton

Answer Checked By – Mary Flores (AngularFixing Volunteer)