NGB | New Genome Browser - a Web - based NGS data viewer | Genomics library

I started using dependency injection to inject an AlertComponent in all my Component to be able to show alert everywhere but I can't make it work...

AlertComponent :

I am uisng ngb date picker. this is my html

I have a following problem:

There is a Component A with a Subcomponent B.

I have a simple html table in which I am showing data by ngFor directive. What I am trying to look for is to add pagination but I am not sure how can I bind this pagination with a table.

My code

I have a simple table i need to show data from json but its showing blank i have fixed data in json format in .ts i just need to show it on html.

My html code

I am very new to angular, I am trying to send a new Rate to the dataBase using rateChange in ngb-rating but it have been fired while it gitting the values from the server for example when I try to console.log the Rate it print the rate that I am getting from the DataBase.

this is the Html Templet:

I have implemented an ngb-accordion which contains a form inside it with a couple of input fields. I want to display an icon with a checkmark when the form is valid(in this case when all forms are just filled without empty fields) and in all other cases it displays a 'X' mark icon. These icons appear in the ngb-panel heading just before the title.

I assigned required property to all fields and a method in the component file checks if the form is valid or not.

SCSS and HTML files-

I have an angular project where I used ngb-accordion from ng-bootstrap to display some details. My accordion is responsive. I have included forms inside each accordion. I have a requirement where I want to display a specific icon above the accordion panel depending on whether the form inside is valid or invalid. Like when the form is filled inside the accordion I would like to display a bootstrap tick icon , if it is wrong then I want it to display a cross mark icon. I tried writing a ngIf directive that checks whether the form is valid or not for the div containing icon.

Below is the code where i tried to implement the above said functionality for one accordion

HTML File

1. I am working with ngb-datepicker which is working fine if no initial values or predefined values are set but when trying to use it formControlName or with [(ngModel)] with an existing predefined value the predefined or initial value is not setting on the redenied view. Imagine this as a scenario of editing a form or record with prefilled values. Other formControls with text and numbers are working as intended.
2. I am using NgbStruct Model but still not working.
3. I tried and debugged the code the value are getting assigned to the form control in a patchValue method and in the format of NgbStruct but not seen in the rendered view
4. I tried to implement similar scenario in example provided in stack blitz by ng-bootstrap it is working fine there

Package.json file