I need to create a selection list with checkboxes inside of an expansion
expansion panel
<mat-expansion-panel *ngFor="let item of Dataseource">
<mat-expansion-panel-header style="display:flex" class="mat-row">
{{datasource.showheader}}
</mat-expansion-panel-header>
<div *ngFor="let match of Datasource; let i= index">
<mat-selection-list [(ngModel)]="selectedOptions" (ngModelChange)="onNgModelChange($event)">
<mat-list-option [value]="match">
<div class="container-name">
<div class="col-6">{{match.Name }} vs {{ match.Address }}</div>
</div>
<mat-divider [inset]="true" *ngIf="!last"></mat-divider>
</mat-list-option>
</mat-selection-list>
</div>
</div>
</mat-expansion-panel>
I should be able to select individual items and add to list object with header and selected items
<mat-expansion-panel *ngFor="let item of Datasource">
<mat-expansion-panel-header style="display:flex" class="mat-row">
{{item.Name}}
</mat-expansion-panel-header>
<mat-selection-list ngFor="let match of item.match; let i= index;" [(ngModel)]="selectedOptions" (ngModelChange)="onNgModelChange($event)">
<mat-list-option *ngFor="let match of item.match" [value]="match">
<div class="container-name">
<div class="col-6">{{match.Name }} vs {{ match.Address }}</div>
</div>
</mat-list-option>
</mat-selection-list>
</div>
<hr>
</mat-expansion-panel>
Not sure why I have been down voted on this.
Surely I found the solution to a problem and can hopefully help someone.
Related
Before creating this question, I've read all the question existing, and none of the answers has fixed my issue.
Well, I'm fetching a data from API, {{ album.image["3"]["#text"] }} - is the link to the .png file which I would like to set as background-image of the . Here is the example of my code:
<div class="album-grid">
<div *ngFor="let album of albums">
<div class="album"> <--! I want here to set a backgroundImage for each album-->
<h4>{{ album.name }},</h4>
<h5>by {{ album.artist.name }}</h5>
<p>{{ album.image["3"]["#text"] }}</p> <--! this is the link to .png file I'm getting from server -->
</div>
</div>
</div>
here is the solutions I've tried, but none of them helped me:
[style.backgroundImage]="album.image['3']['#text']"
[style]="backgroundImage: {{album.image['3']['#text']}"
[ngStyle]="{ 'backgroundImage': album.image['3']['#text'] }"
Link to my repo -> https://github.com/paslavskyi9roman/Spotilar
On a picture, you can see a grid of albums, with the album name, artist name, and link to album cover file which need to be a background image
click here
You are missing the url() part.
Try the following (as seen in your repository)
<div class="album" [ngStyle]="{ 'backgroundImage': 'url('+ album.image['3']['#text'] + ')'}">
<h4>{{ album.name }},</h4>
</div>
<h5>by {{ album.artist.name }}</h5>
</div>
So I am basically trying to set a highlight if an object is selected already. How can I compare the objects to change classes? Something like this
<[ngClass]="{{perkResult.perk === perk.perk}} ? 'highlight' : 'none-hightlight' ">
Current code:
<div class="col-xs-12">
<div class="col-xs-12 benefit-selection">
<ul class="benefits-dropdown-ul" *ngIf="perkList"> .
<a class="benefits-dropdown-div" *ngFor="let perkResult of perkList.results" (click)="onAddPerk(perkResult)">
//highlight here
<li class="benefits-dropdown-li">{{ perkResult.perk }}</li>
</a>
</ul>
</div>
</div>
<div class="col-xs-6 benefit-selected" *ngFor="let perk of company.perks; trackBy: customTrackBy; let i = inde
{{ perk.perk }}
</div>
You do not need the interpolation brackets {{}}. In this case, [ngClass] is looking for an expression, so
[ngClass]="perkResult.perk === perk.perk ? 'highlight' : 'none-hightlight'"
or
[ngClass]="[perkResult.perk === perk.perk ? 'highlight' : 'none-hightlight']"
will work.
You want the whole expression inside {{}} to evaluate to the class string you want
[ngClass]="{{perkResult.perk === perk.perk ? 'highlight' : 'none-hightlight'}}"
I need to make reactive a class inside a const (exported from a module).
export const messageControls = '
<div id="controls"">
<i id="idcont" class="{{starred}}"></i>
</div>
'
This class belongs to an HTML block who's inserted as innerHTML of a createElement.
var newElement = document.createElement('div');
newElement.id = i._id;
newElement.className = "single_message";
newElement.innerHTML = messageControls;
document.getElementById('conversation_details').appendChild(newElement);
The {{helper}} below is not rendering anything :
starred: function () {
return 'bob';
},
<i id="idcont" class="{{starred}}"></i> gives {{starred}} in plain text
<i id="idcont" class=" ' + {{starred}} + ' "></i> breaks all
Any idea?
Update - full Blaze template as requested
<template name="inbox">
<div class="searchmessages">
<input type="text" name="searchmessages" id="searchmessages" placeholder=" any word / any date">
</div>
<div class="row">
<div class="col-xs-4 l-O list_messages">
<div id="gridreceived" class="gridmessages">
{{#each incoming_all}}
<div id="{{_id}}" class="item {{readornot}}">
<div class="item-content">
<div class="task_inlist">
<div class="task_from">
{{{from}}}
</div>
<div class="task_date">
{{initialdate}}
</div>
<div class="task_subject">
{{{subject}}}
</div>
<div class="task_content">
{{{htmlbody}}}
</div>
</div>
</div>
</div>
{{/each}}
</div>
<div class="grid_nomatch">{{grid_noresult}}</div>
</div>
<div id="conversation_details" class="col-xs-8" media="print">
<!--
here are each selected message details
-->
</div>
</div>
</template>
You're trying to inject spacebars template markup directly into the DOM but meteor-blaze wants to use spacebars to build the DOM. It doesn't watch the DOM for arbitrary changes and then make template substitutions inside of it!
You can instead use Meteor's reactivity to automatically insert new items into the DOM for you based on changes to the underlying data. In your case it looks like you're trying to show the details of a message that's been clicked on. You probably have a template event handler already to catch the click. In that template handler you can set a Session variable which indicates which message is currently selected and then use that Session variable inside the helper that renders the message details.
For example:
<template name="inbox">
<div class="searchmessages">
<input type="text" name="searchmessages" id="searchmessages" placeholder=" any word / any date">
</div>
<div class="row">
<div class="col-xs-4 l-O list_messages">
<div id="gridreceived" class="gridmessages">
{{#each incoming_all}}
<div id="{{_id}}" class="item {{readornot}}">
// render summary of each message
</div>
{{/each}}
</div>
<div class="grid_nomatch">{{grid_noresult}}</div>
{{#with selectedMessage}}
<div id="conversation_details" class="col-xs-8" media="print">
// render selected message details
</div>
{{/with}}
</div>
</template>
Your js:
Template.inbox.events({
'click .item'(ev) {
Session.set('selectedMessageId',this._id);
}
});
Template.inbox.helpers({
selectedMessage() {
return Messages.findOne(Session.get('selectedMessageId'));
}
});
Now to your follow-up question about how to reactively style an element. Let's say your message* object has aisStarredboolean key. In the message detail section we've set the data context using{{#with currentMessage}}` so any key of the current message can be used directly in our spacebars template. Where you are displaying the message details you can do:
<div id="controls"">
<i id="idcont" class="{{#if isStarred}}starred{{/if}}"></i>
</div>
Depending on whether or not the message is starred this will render as class="" or class="starred".
I am just new to Drupal and trying to update some existing applications. I am trying to associate the title to an URL. I tried this
link(title, content.field_url)
But I don't think I am right track. Any help would be appreciated. Following is the twig templet for displaying persons.
<div class="wdn-col" style="margin-top:2.4em;">
<div class="wdn-grid-set">
<div class="wdn-col-three-sevenths">
<div class="wdn-frame">{{ (content.field_portrait) }}</div>
</div>
<div class="wdn-col-four-sevenths">
<h5 class="wdn-brand clear-top">{{title }}
<span class="wdn-subhead">{{ (content.field_position) }}, {{ (content.field_institution) }}</span></h5>
<p style="font-size:smaller;">{{ (content.field_unit) }}</p>
<p>{{ (content.field_email_address) }}</p>
</div>
</div>
</div>
Try like this way....
{{ title }}
Relatively new to Ionic.
I have seen examples of this succeeding here in stackoverflow
http://stackoverflow.com/questions/30584948/ionic-framework-different-background-color-for-each-list-item
http://stackoverflow.com/questions/30806738/why-collection-repect-not-show-alternate-color-in-angular-js
However, I not having success in the implementation. I have my collection-repeat in an ion-item tag.
<ion-item class="item item-thumbnail-left artistList" collection-repeat="artist in artists | filter:searchText" collection-item-height = "100px" ng-click="artistDetail(artist)" on-swipe-left="onSwipeLeft(artist)">
<img ng-src="{{ artist.image }}">
<h2>{{ artist.name }}</h2>
<h4>{{ artist.email }}</h4>
<h4>{{ artist.twitter }}</h4>
<h4>Upcoming Event: {{ artist.artist_info.upcoming_events[0].datetime | date: 'MMM d, y' }} </h4>
<h4 class="defaultValue" ng-hide="artist.artist_info.upcoming_events[0].datetime"> None Yet!</h4>
<div class = "item-icon-right">
<i class="icon ion-ios-arrow-right item-right positive"></i>
</div>
<ion-option-button ng-click="payPal(artist.artist_info.paypal_link)" class="button-positive icon ion-social-usd"></ion-option-button>
<ion-option-button class="button-positive icon ion-heart"></ion-option-button>
</ion-item>
I attempted to do ng-class-odd="odd-row" ng-class-even="even-row"and have declare the css but there was no change. Does this work differently with ionic-item tag?
Here is similar to what I would like (Except I want every other to be a different color):
http://plnkr.co/edit/L80IcehgBQTiVXCCLWo9?p=preview
One solution could be to use the $index property of the ion-list.
Just to give you some information about $index it gives the index of current list item and starts from zero index. Means the index of first item will be zero.
As per the code provided by you the following code should work
<ion-item class="item item-thumbnail-left artistList"
collection-repeat="artist in artists | filter:searchText"
collection-item-height = "100px"
ng-click="artistDetail(artist)"
on-swipe-left="onSwipeLeft(artist)"
ng-class="$index%2 != 0 ? 'classA' : ''" >
It will added the classA on every alternate item starting from second item of list (since the index of list is started with zero)
Refer this updated Plnkr code.
Hope this will help.