I'm working with tooltip in ngx-bootstrap, and want to pass data to the ng-template being to the tooltip. The documentation provides [tooltipContext], but it didn't seem to be working. I have provided a code snippet.
HTML:
<ng-template #tooltipTmpl let-view="view">
<div class="tooltip-section">
<div class="section-title">
{{ view.dateRangeText }}
</div>
<div class="section-text">
{{ view.data }}
</div>
</div>
</ng-template>
<div
*ngIf="view.isVisible"
[tooltip]="tooltipTmpl"
[tooltipContext]="{view: view}"
containerClass="white-tool-tip"
placement="top"
>
<div class="sub-title">
{{ view.title }}
</div>
</div>
REF: https://valor-software.com/ngx-bootstrap/#/tooltip
I have used bootstrap popover in my projects, so would recommend using popover.
Also, there was an issue created on GitHub but the user ended up using popover -
https://github.com/valor-software/ngx-bootstrap/issues/4775
#Yiu Pang Chan - you can have views array with following approach.
In app.component.html file
<div *ngFor="let view of views; let i = index">
<button type="button" class="btn btn-success"
*ngIf="view.isVisible"
[tooltip]="tooltipTmpl" on-mouseover="setTooltipData(view)" >
Show me tooltip with html {{ view.title }}
</button>
</div>
<ng-template #tooltipTmpl>
<h4>
{{ viewDateRangeText }}
</h4>
<div>
<i>
{{ viewData }}
</i>
</div>
</ng-template>
In app.component.ts file
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
public viewDateRangeText: string;
public viewData: any;
setTooltipData(view: any){
viewDateRangeText = view.dateRangeText;
viewData = view.data;
}
}
I have face the same problem , so far I have check the source code the tooltipContext mark as deprecated you can do a work a round thi like this
you can still access to the view property inside the ng-template
<button type="button" class="btn btn-success"
*ngIf="view.isVisible"
[tooltip]="tooltipTmpl">
Show me tooltip with html {{ view.title }}
</button>
<ng-template #tooltipTmpl>
<h4>
{{ view.dateRangeText }}
</h4>
<div>
<i>
{{ view.data }}
</i>
</div>
</ng-template>
demo 🔥🔥
Updated 🚀🚀
incase you want to use my solation with array of views , you juest need to move ng-template to the body of the ngFor.
template
<ng-container *ngFor=" let view of views">
<button type="button" class="btn btn-success"
*ngIf="view.isVisible"
[tooltip]="tooltipTmpl">
Show me tooltip with html {{ view.title }}
</button>
<ng-template #tooltipTmpl>
<h4>
{{ view.dateRangeText }}
</h4>
<div>
<i>
{{ view.data }}
</i>
</div>
</ng-template>
<br>
<br>
</ng-container>
demo 🚀🚀
#rkp9 Thanks for the codes. It does solve the issue, but it added viewDateRangeText, viewData, and setTooltipData in the TS codes.
I went with the approach #MuhammedAlbarmavi suggested, since it is without extra variables and functions. The comment on Github didn't have the configuration that we need for popover to act like a tooltip. I have it in the following.
<ng-template #tooltipTmpl let-view="view">
<div class="tooltip-section">
<div class="section-title">
{{ view.dateRangeText }}
</div>
<div class="section-text">
{{ view.data }}
</div>
</div>
</ng-template>
<div
[popoverContext]="{ view: view }"
[popover]="tooltipTmpl"
triggers="mouseenter:mouseleave"
placement="top"
>
<div class="sub-title">
{{ view.title }}
</div>
</div>
Related
i have an app made with vue-CLI including bootstrap-vue. In my App.vue i'am using axios to fetch some sample JSON-data. I generate a list with the b-list-group-item (bootstrap-tag) and want to bind a key in each element (v-bind:key="result.ItemId"). This is not working. In html no "key" is rendered.
This is the code snippet:
<b-list-group >
<b-list-group-item
href="#"
class="flex-column align-items-start"
v-for="result in post"
v-bind:key="result.ItemId"
>
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1">{{ result.ItemHeading }}</h6>
<small>{{ result.ItemSubHeading }}</small>
</div>
<p class="mb-1">{{ result.ItemDetails }}</p>
</b-list-group-item>
</b-list-group>
This is the rendered html with no key-binding:
This is the JSON-result:
0: {ItemId: "10075328", ItemHeading: "news im November", ItemSubHeading: "unter news",…}
Date4Itemnew: "24.11.2019"
ItemDetails: "lorem ipsum"
ItemHeading: "news im November"
ItemId: "10075328"
ItemSubHeading: "unter news"
u_date: "1574550000"
I tried all possibilities to bind it. Please help.
First you have to loop inside the json file by value of key [ result.ItemHeading ] , After you have to bind this value inside props by same name of value props: ["ItemHeading", "ItemSubHeading", "ItemDetails"]
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<b-list-group>
<b-list-group-item
href="#"
class="flex-column align-items-start"
v-for="result in post"
v-bind:key="result.ItemId"
v-bind:ItemHeading="result.ItemHeading"
v-bind:ItemSubHeading="result.ItemSubHeading"
v-bind:ItemDetails="result.ItemDetails"
>
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1">{{ result.ItemHeading }}</h6>
<small>{{ result.ItemSubHeading }}</small>
</div>
<p class="mb-1">{{ result.ItemDetails }}</p>
</b-list-group-item>
</b-list-group>
</template>
<script>
export default {
props: ["ItemHeading", "ItemSubHeading", "ItemDetails"]
};
</script>
In vuejs, is there a way to set the same content for multiple slots without copy pasting?
So this:
<base-layout>
<template slot="option">
<span :class="'flag-icon-' props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
</template>
<template slot="singleLabel">
<span :class="'flag-icon-' props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
</template>
</base-layout>
Could be written that way:
<base-layout>
<template slot="['option', 'singleLabel']">
<span :class="'flag-icon-' props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
</template>
</base-layout>
Thanks a lot.
You could try using v-for for that.
<base-layout>
<template :slot="slotName" v-for="slotName in ['option', 'singleLabel']">
<span :class="'flag-icon-' props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
</template>
</base-layout>
See working example.
I have code like this
<template *ngIf='mobile'>
<div class='wrapper'>
<div class='nav'>
<ng-content></ng-content>
</div>
</div>
</template>
<template *ngIf='desktop'>
<ng-content></ng-content>
</template>
However, Angular 2 renders ng-content just one time. Is there a way to get this case working properly without too much hacking?
update Angular 5
ngOutletContext was renamed to ngTemplateOutletContext
See also https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
original
You can pass the content as a template, then you can render it multiple times.
<parent>
<template>
projected content here
</template>
</parent>
In parent
<ng-container *ngIf='mobile'>
<div class='wrapper'>
<div class='nav'>
<template [ngTemplateOutlet]="templateRef"></template>
</div>
</div>
</ng-container>
<template *ngIf='desktop'>
<template [ngTemplateOutlet]="templateRef"></template>
</template>
export class ParentComponent {
constructor(private templateRef:TemplateRef){}
}
You can also pass data to the template to bind with the projected content.
<ng-container *ngIf='mobile'>
<div class='wrapper'>
<div class='nav'>
<template [ngTemplateOutlet]="templateRef" [ntOutletContext]="{ $implicit: data}"></template>
</div>
</div>
</ng-container>
<ng-container *ngIf='desktop'>
<template [ngTemplateOutlet]="templateRef" [ntOutletContext]="{ $implicit: data}"></template>
</ng-container>
export class ParentComponent {
#Input() data;
constructor(private templateRef:TemplateRef){}
}
and then use it like
<parent [data]="data">
<template let-item>
projected content here {{item}}
</template>
</parent>
See also My own Angular 2 Table component - 2 way data binding
I am using Angular Material 2 for my Angular 2 app. My dashboard page is not rendering full page in the browser. Attached is the screenshot of the above mentioned issue.
AppComponent - Template file:
<router-outlet></router-outlet>
DashboardComponent - Template file :
<md-sidenav-layout>
<md-sidenav #sidenav mode="side" class="app-sidenav md-sidenav-over" (open)="list.focus()">
<ul #list>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
</md-sidenav>
<md-toolbar color="primary">
<button class="app-icon-button" (click)="sidenav.toggle()">
<i class="material-icons app-toolbar-menu">menu</i>
</button>
<span class="margin-left10"> Angular Material2 Portal </span>
<span class="app-toolbar-filler"></span>
<button md-button router-active [routerLink]=" ['Index']">
Index
</button>
<button md-button router-active [routerLink]=" ['Home']">
{{ 'HOME.TITLE' | translate }}
</button>
<button md-button router-active [routerLink]=" ['About'] ">
{{ 'ABOUT.TITLE' | translate }}
</button>
</md-toolbar>
<div class="app-content">
<md-card>
Dashboard Content Goes Here..!!
</md-card>
</div>
<footer>
<span id="footerText">Dashboard Footer</span>
</footer>
</md-sidenav-layout>
DashboardComponent.ts:
import {Component, Inject, ElementRef, OnInit, AfterViewInit} from '#angular/core';
import {TranslatePipe} from 'ng2-translate/ng2-translate';
console.log('`Dashboard` component loaded asynchronously');
#Component({
selector: 'dashboard',
styles: [
require('./dashboard.component.css')
],
template: require('./dashboard.component.html'),
pipes: [TranslatePipe]
})
export class Dashboard implements {
elementRef:ElementRef;
constructor(#Inject(ElementRef) elementRef:ElementRef) {
this.elementRef = elementRef;
}
ngOnInit() {
console.log('hello `Dashboard` component');
}
}
Am I missing something here ?
Please refer :
Screenshot of my half-page rendered dashboard page
Appreciate your help.
You are missing the fullscreen attribute inside of the md-sidenav-layout tag.
This attribute will add these properties to the md-sidenav-layout:
[_nghost-oog-2][fullscreen] {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
It's not very well documented quite yet that such an attribute can be added to the md-sidenav-layout since it is still in alpha. But within this preview at ngconf they demonstrate some of what you can currently use from Material 2.
I'm trying to do a ng-repeat inside the view returned by a directive.
Here is my template defined in templateUrl
<div class="outside">
<div class"inside" ng-repeat="copas as cup">
{{ cup.nombre }}
cupcakes.nombre
{{ cup }}
cupcakes
</div>
{{ copas[0].nombre }}
{{ copas }}
</div>
The content inside "inside" class is empty, while the content at the bottom of outside class is correct.
What am I missing?
thank you
It should be cup in copas for your ngRepeat expression:
<div class="outside">
<div class"inside" ng-repeat="cup in copas">
{{ cup.nombre }}
cupcakes.nombre
{{ cup }}
cupcakes
</div>
{{ copas[0].nombre }}
{{ copas }}
</div>