- this includes codes to talk to the api,
- to call external api, we will
- create a service folder
- inside it, run the command
ng g s "service name"
- here
g
is for generate, ands
is for service. angular generate service.
- here
- to call external api, we will
<div class="card flex justify-content-center">
<p-paginator
(onPageChange)="PageChanged($event)"
[first]="first"
[rows]="rows"
[totalRecords]="totalRecords"
></p-paginator>
</div>
[first]="first" [rows]="rows"
- these two are used to set the default values of the paginator set from user side but by click function.
on the other hand
[totalRecords]="totalRecords"
- this data is sent from database thus used input decorator to catch the data
there are three different ways to register and provide services using dependency injection:
- Singleton
to make a service file as singleton mention the following in the file
@Injectable({ providedIn: 'root', })
setting this property to 'root' level, makes it a singleton to be shared across the entire application.
- Transient
When a service is registered as transient, a new instance of the service is created every time it is requested.
@Injectable({ providedIn: 'any', })
- Scoped
Use when a single instance of a service for each lazy-loaded module needs to be created.
@Injectable({ providedIn: SomeModule, // Provides the service at the module level (separate instance for each module) })
<app-page-navigation
(handleUserClick)="onPageNumberChanges($event)"
[totalRecords]="totalRecords"
></app-page-navigation>
- handleUserClick is a custom even made in child component using @outptut decorator to help get data from child2parent.
- when handleUserClick is triggered, it calls onPageNumberChanges method and passes value from child compoent 2 parent through event -->
<div *ngIf="dataLoaded">
<div *ngIf="noResultsFound">
<p>Product not found</p>
</div>
<div *ngIf="!noResultsFound">
<br />
<p>Search Result</p>
<div class="product-grid">
<div *ngFor="let eachCard of products">
<app-product-card [product]="eachCard"></app-product-card>
</div>
</div>
<br />
<app-page-navigation
(handleUserClick)="onPageNumberChanges($event)"
[totalRecords]="totalRecords"
></app-page-navigation>
</div>
</div>
no html p tag was showing in parent component.
- so when i wrapped this component inside a div, it solved the issue.
previously my code with error was this:
changes that solved the error
<ng-template #appRoot> <app-search [searchingEntry]="searchingEntry"></app-search> </ng-template>
<ng-template #appRoot> <div class="body"> <app-search [searchingEntry]="searchingEntry"></app-search> </div> </ng-template>