ng-container with ngTemplateOutlet and ng-template with context variable

<div *ngIf="!multiOptionsChart.length" class="row">

<ng-container *ngTemplateOutlet="

chartBlock;

context: {

optionItem : options,

chartType:'single'

}">

</ng-container>

</div>

<div *ngIf="multiOptionsChart.length" class="row">

<div *ngFor="let optionItem of multiOptionsChart; let i = index">

<ng-container *ngTemplateOutlet="

chartBlock;

context: {

optionItem : optionItem ,

chartType:'multi'

}">

</ng-container>

</div>

</div>

<ng-template #chartBlock

let-optionItem="optionItem"

let-chartType="chartType">

<div class="graph-action">

your multi and single chart type common code

</div>

<ng-container *ngIf="chartType === 'multi'">

<span>chartType</span>

<span>: {{ chartType }}</span>

</ng-container>

<ng-container *ngIf="chartType === 'single'">

<span>single chartType</span>

<span>: {{ chartType }}</span>

</ng-container>

Name : {{ optionItem.name }}

</ng-template>

Debug websites in different browsers and devices and write their css media queries

 

 

        css media query for all devices

        https://simplecss.eu/

You can also test in diffrent device using this tool 

Download from    https://www.lambdatest.com/

    

   in Ubuntu  

    step 1 :     chmod a+x LTBrowser.AppImage

    step 2 for run :   ./LTBrowser.AppImage 

 

       

Example 13" Macbook Pro Retina

@media only screen and (max-width : 1600px) and (max-height : 2560px) {

}

Vue Dynamic Directive Arguments and vue event binding

   Vue Dynamic Directive Arguments

  Vue Promise

  

 If you do not want the root element of a component to inherit attributes, you can set 

  inheritAttrs: false

in the component’s options

vue event shortcut