Questions tagged [angular2-mdl]
angular2-mdl is a component library for angular 2 apps based on material design lite (getmdl.io).
Features and Benefits
Easy to use components and directives for angular 2
Components instead of css classes.
This will provide less errors and a better tool support.
The html code is shorter.
Possibibility to use the official mdl css from https://getmdl.io or the scss sources
Useful links
Related tags
angular2
I am using angular2-mdl (http://mseemann.io/angular2-mdl/) for styling in my angular cli project. I have added default css in my index.html as
asked Sep 27 '17 at 12:49
I have an expansion panel group and I am trying to appy a css class to the active panel:
…
asked Jul 30 '17 at 09:05
I am trying to apply a css class to material icon like following:
check_circle
without condition it would look like this (which works):
asked Jul 26 '17 at 17:36
I have three product arrays and a variable to hold current one as a selection:
product_types=['One', 'Two', 'Three']
product_type_one = [
{'description': 'Type one sample one', 'type': 'one'},
{'description': 'Type one sample two', 'type':…
asked Jul 01 '17 at 20:09
I want to show text follwed by an icon.
I'm using material icons.
I want to achieve what it is on the left. But the right side is the one I'm getting.
I tried padding,margin,line height and everything but I couldn't make them align.
The Working…
asked Jun 24 '17 at 18:15
I am trying to use a material lite fixed header in my angular cli project, header is rendered with all the links but is not fixed.
My app.html:
My…
asked Jun 23 '17 at 15:19
I'm using angular2-mdl and applying the tooltip to header items.
But the tooltip is looking obfuscated.
Nothing was added on purpose for this to happen.
See the index.html:
App…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a>
<a href="../../questions/tagged/tooltip" class="post-tag grid--cell" title="show questions tagged 'tooltip'" rel="tag">tooltip</a>
<a href="../../questions/tagged/angular2-mdl" class="post-tag grid--cell" title="show questions tagged 'angular2-mdl'" rel="tag">angular2-mdl</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Jun 06 '17 at 18:04">asked Jun 06 '17 at 18:04</time>
<a href="../../users/4868224/severo" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/4868224.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Severo" />
</a>
<div class="s-user-card--info">
<a href="../../users/4868224/severo" class="s-user-card--link">Severo</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">123</li>
<li class="s-award-bling s-award-bling__bronze" title="7 bronze badges">7</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-44243218">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>0</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/44243218/mdl-dialog-with-angular-4" class="question-hyperlink">MDL -dialog with angular 4</a></h3>
<div class="excerpt">Usign MDL_dialog from Angular2-mdl and it has stop working after upgrade to angular 4.
Get -Renderer.animate is no longer supported!
Tried to upgrade Angular2 -mdl but cannot install it wiht angular 4.
Any ideas?
</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/angular2-mdl" class="post-tag grid--cell" title="show questions tagged 'angular2-mdl'" rel="tag">angular2-mdl</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked May 29 '17 at 13:04">asked May 29 '17 at 13:04</time>
<a href="../../users/1214235/kingrauk" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/1214235.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="kingRauk" />
</a>
<div class="s-user-card--info">
<a href="../../users/1214235/kingrauk" class="s-user-card--link">kingRauk</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">1,259</li>
<li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li>
<li class="s-award-bling s-award-bling__silver" title="11 silver badge">11</li>
<li class="s-award-bling s-award-bling__bronze" title="24 bronze badge">24</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-44165637">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>0</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/44165637/angular2-mdl-dialog-service-loaded-component-do-not-subscribe-to-emitted-event" class="question-hyperlink">Angular2 mdl-dialog-service- loaded component do not subscribe to emitted event</a></h3>
<div class="excerpt">I have a central service registered at app level whose task is to keep and send latest state of a model across all components:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Feature } from…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a>
<a href="../../questions/tagged/angular2-mdl" class="post-tag grid--cell" title="show questions tagged 'angular2-mdl'" rel="tag">angular2-mdl</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked May 24 '17 at 18:05">asked May 24 '17 at 18:05</time>
<a href="../../users/5341676/thinker" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/5341676.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Thinker" />
</a>
<div class="s-user-card--info">
<a href="../../users/5341676/thinker" class="s-user-card--link">Thinker</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">5,326</li>
<li class="s-award-bling s-award-bling__gold" title="13 gold badges">13</li>
<li class="s-award-bling s-award-bling__silver" title="61 silver badges">61</li>
<li class="s-award-bling s-award-bling__bronze" title="137 bronze badges">137</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-43677315">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/43677315/can-t-resolve-all-parameters-for-mdldialogreference" class="question-hyperlink">Can't resolve all parameters for MdlDialogReference</a></h3>
<div class="excerpt">I am trying to use angular2-mdl component and to display a dialog. Only when I need to use MdlDialogReference do I get this error. I can create the dialog provided I try not to inject MdlDialogReference.
I have seen other answers to somthing like…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a>
<a href="../../questions/tagged/material-design-lite" class="post-tag grid--cell" title="show questions tagged 'material-design-lite'" rel="tag">material-design-lite</a>
<a href="../../questions/tagged/angular2-mdl" class="post-tag grid--cell" title="show questions tagged 'angular2-mdl'" rel="tag">angular2-mdl</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Apr 28 '17 at 09:55">asked Apr 28 '17 at 09:55</time>
<a href="../../users/373706/aqwert" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/373706.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="aqwert" />
</a>
<div class="s-user-card--info">
<a href="../../users/373706/aqwert" class="s-user-card--link">aqwert</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">10,559</li>
<li class="s-award-bling s-award-bling__gold" title="2 gold badges">2</li>
<li class="s-award-bling s-award-bling__silver" title="41 silver badges">41</li>
<li class="s-award-bling s-award-bling__bronze" title="61 bronze badges">61</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-43604621">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>0</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/43604621/mdldialogservice-html-in-alert-results-in-sanitisation-error" class="question-hyperlink">MdlDialogService HTML in alert results in sanitisation error</a></h3>
<div class="excerpt">I am using MdlDialogService in my angular2 project to alert.
openHelpDialog(){
let result = this.dialogService.alert("<h5>Welcome to Vision Backlog!</h5>");
result.subscribe( () => console.log('alert closed') );
}
What could be the best…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a>
<a href="../../questions/tagged/material-design-lite" class="post-tag grid--cell" title="show questions tagged 'material-design-lite'" rel="tag">material-design-lite</a>
<a href="../../questions/tagged/angular2-mdl" class="post-tag grid--cell" title="show questions tagged 'angular2-mdl'" rel="tag">angular2-mdl</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Apr 25 '17 at 07:46">asked Apr 25 '17 at 07:46</time>
<a href="../../users/5341676/thinker" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/5341676.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Thinker" />
</a>
<div class="s-user-card--info">
<a href="../../users/5341676/thinker" class="s-user-card--link">Thinker</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">5,326</li>
<li class="s-award-bling s-award-bling__gold" title="13 gold badges">13</li>
<li class="s-award-bling s-award-bling__silver" title="61 silver badges">61</li>
<li class="s-award-bling s-award-bling__bronze" title="137 bronze badges">137</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-43389734">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/43389734/angular2-mdl-disabling-mdl-menu-item-not-working" class="question-hyperlink">Angular2 MDL disabling mdl-menu-item not working</a></h3>
<div class="excerpt">I am trying to disable mdl-menu-item based on condition set by module.
my app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'ca-root',
templateUrl: './app.component.html',
styleUrls:…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/angular2-mdl" class="post-tag grid--cell" title="show questions tagged 'angular2-mdl'" rel="tag">angular2-mdl</a>
<a href="../../questions/tagged/angular-mdl" class="post-tag grid--cell" title="show questions tagged 'angular-mdl'" rel="tag">angular-mdl</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Apr 13 '17 at 10:24">asked Apr 13 '17 at 10:24</time>
<a href="../../users/3059623/aeseir" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/3059623.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Aeseir" />
</a>
<div class="s-user-card--info">
<a href="../../users/3059623/aeseir" class="s-user-card--link">Aeseir</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">7,754</li>
<li class="s-award-bling s-award-bling__gold" title="10 gold badges">10</li>
<li class="s-award-bling s-award-bling__silver" title="58 silver badges">58</li>
<li class="s-award-bling s-award-bling__bronze" title="107 bronze badges">107</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-43316057">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/43316057/integrate-mdl-with-angular-2" class="question-hyperlink">Integrate MDL with Angular 2</a></h3>
<div class="excerpt">The MDL didn't works with Angular in my Environnement.
I proceed this tutorial :
https://getmdl.io/started/index.html
The libraries are present in node_modules, but debugger show me message :
[WDS] App updated. Reloading...
login:10 GET…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a>
<a href="../../questions/tagged/angular2-mdl" class="post-tag grid--cell" title="show questions tagged 'angular2-mdl'" rel="tag">angular2-mdl</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Apr 10 '17 at 06:10">asked Apr 10 '17 at 06:10</time>
<a href="../../users/6905540/vanilka" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/6905540.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="VANILKA" />
</a>
<div class="s-user-card--info">
<a href="../../users/6905540/vanilka" class="s-user-card--link">VANILKA</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">634</li>
<li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li>
<li class="s-award-bling s-award-bling__silver" title="13 silver badge">13</li>
<li class="s-award-bling s-award-bling__bronze" title="32 bronze badge">32</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-43308443">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/43308443/badge-issue-angular2-mdl-4-0-1-angular-4" class="question-hyperlink">Badge issue - angular2-mdl 4.0.1 (Angular 4)</a></h3>
<div class="excerpt">I am using badges as follows:
<mdl-icon [mdl-badge]="myCount" mdl-badge-overlap>some_icon</mdl-icon>
When myCount:number is null, the mdl version for Angular 2 used to hide the badge. Current version (4.0.1 with Angular 4) shows a badge with 'null'…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a>
<a href="../../questions/tagged/badge" class="post-tag grid--cell" title="show questions tagged 'badge'" rel="tag">badge</a>
<a href="../../questions/tagged/angular2-mdl" class="post-tag grid--cell" title="show questions tagged 'angular2-mdl'" rel="tag">angular2-mdl</a>
<a href="../../questions/tagged/angular-mdl" class="post-tag grid--cell" title="show questions tagged 'angular-mdl'" rel="tag">angular-mdl</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Apr 09 '17 at 15:19">asked Apr 09 '17 at 15:19</time>
<a href="../../users/5352647/alic-w" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/5352647.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Alic W" />
</a>
<div class="s-user-card--info">
<a href="../../users/5352647/alic-w" class="s-user-card--link">Alic W</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">128</li>
<li class="s-award-bling s-award-bling__bronze" title="7 bronze badges">7</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-42955251">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>0</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/42955251/angular2-mdl-tooltip-gets-stuck-when-disabling-button" class="question-hyperlink">angular2-mdl tooltip gets stuck when disabling button</a></h3>
<div class="excerpt">I've set an mdl-tooltip on a button.
When the mouse hovers over the button, tooltip is displayed correctly.
When the mouse leaves the button, tooltip disappears correctly.
When button is clicked, button is disabled and the tooltip remains displayed.…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/angular2-mdl" class="post-tag grid--cell" title="show questions tagged 'angular2-mdl'" rel="tag">angular2-mdl</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Mar 22 '17 at 14:55">asked Mar 22 '17 at 14:55</time>
<a href="../../users/6293290/jessiee" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/6293290.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="jessieE" />
</a>
<div class="s-user-card--info">
<a href="../../users/6293290/jessiee" class="s-user-card--link">jessieE</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">3</li>
<li class="s-award-bling s-award-bling__bronze" title="2 bronze badges">2</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="s-pagination pager fr">
<a class="s-pagination--item" href="../../questions/tagged/angular2-mdl_page=2" rel="prev" title="Go to page 2">Prev </a>
<a class="s-pagination--item" href="../../questions/tagged/angular2-mdl_page=1" rel="" title="Go to page 1">1</a>
<a class="s-pagination--item" href="../../questions/tagged/angular2-mdl_page=2" rel="" title="Go to page 2">2</a>
<div class="s-pagination--item is-selected">3</div>
<a class="s-pagination--item" href="../../questions/tagged/angular2-mdl_page=4" rel="" title="Go to page 4">4</a>
<a class="s-pagination--item" href="../../questions/tagged/angular2-mdl_page=5" rel="" title="Go to page 5">5</a>
<a class="s-pagination--item" href="../../questions/tagged/angular2-mdl_page=4" rel="next" title="Go to page 4"> Next</a>
</div>
</div>
</div>
</div>
</div>
<script src="../../static/js/stack-icons.js"></script>
<script src="../../static/js/fromnow.js"></script>
</body>
</html> 
