How to do one header with two divison without child header name in ag-grid angular - ag-grid-angular

I am new to ag-grid in angular.In ag-grid one header with two divisons do not want a child header name is it possible in ag- grid in angular
Here i attach the requirement image
enter image description here

Related

ngx-toastr in Angular 9 App with container in one child component

I am using ngx-toastr to display notification messages. but I want to display the message only in one child component (and the width should be adjusted according to the width of the child component). when the user navigates to another route, it should not be visible.
i tried https://github.com/scttcper/ngx-toastr#put-toasts-in-your-own-container ,but not working.
Please help.

Position dynamically generated cards

I am working on angular application. My code is as follows
https://stackblitz.com/edit/angular-mat-card-example-57kjum?file=src%2Fapp%2Fapp.component.html
In this I have cards. One single mat-card. Other cards I am generating dynamically on the basis of data in array. Problem I am facing is dynamically generated cards using *ngFor are starting below first card. I want to have first card at first place then from near to it these dynamically generated cards should start and if space is not left at first line then card should come to second line and on third and so on. It seems I am doing some mistake in diving page in col and row, but not sure though. How can I do that?
put the contents of the card in a div and in the css put this
min width: max content; like that, the div will take the size of the carte content

How to use flex-layout in nested components in angular 5?

I am creating one application which has multiple components using parent child relationship in angular 5.
Inside my main app.component.html I have this structure.
<app-layout-header></app-layout-header>
<app-layout-view></app-layout-view>
<app-layout-add></app-layout-add>
<router-outlet></router-outlet>
<app-layout-footer></app-layout-footer>
where this directive "app-layout-header" is responsible for loading side-navigation and top-navigation like this.
Now this directive "app-layout-view" is responsible for loading data-table or grid like this.
I want to use flex layout so that I can make it responsive and also I want final result like this.
But I am not sure how will I place the data-table exactly inside the place I wanted, that is below top-nav-bar and close to side menu. Currently it is coming below the whole side menu as you can see in the second image.
What Should I do now to get desired result?

Does ag-grid expose the div row element to consumers?

I was trying to add my own custom directives to the div rows created by ag-grid.
As investigated, each ag-grid row will made up of a div element level. I need to get access to that div element level.
For example each div element row will contain,
<div role="row" row-index="10" row-id="8" comp-id="35" class="ag-row ag-row-no-focus ag-row-even ag-row-animation ag-row-level-2">
Does ag-grid expose this div row element to consumers? Or can I use Angular to retrieve those elements?

HTML layout with bootstrap

I am trying to get the desired layout as in http://jsfiddle.net/yFxea/16/ and the affect I am trying to achieve is on click of the "record" in the left, that attributes for that record to be displayed on right. But the attributes section's location should be the same for all records and as I click on each record the previous record's attributes should hide and display the current record's attributes. I was able to get the desired look and effect but what broke is the additional requirement that both the record content and attributes should be nested under the same DIV (or section tag).
I understand that this is not a bootstrap question but I don't want to break anything that bootstrap does.
Thanks