I am working on a angular material application. i have a page where i need to list number of languages. i am using md-grid-list instead of conventional ul and li.
However when the page loads/refreshes the list gets overlapped for a fraction of second before it gets displayed properly.
Code
<md-grid-list md-cols-md="3" md-cols-lg="3" md-cols-sm="3" md-cols-xs="2" md-row-height-gt-sm="6:1" md-row-height="7:1" md-gutter="33px">
<md-grid-tile ng-repeat="language in vm.languages" class="language">
<a data-ng-click="vm.changeLanguage(language.key)"><span ng-bind="language.language | humanize"></span></a>
</md-grid-tile>
</md-grid-list>
it would be great if anyone can share a solution for this.
Try to put ng-cloack as an attribute of the "md-grid-list".
<md-grid-list md-cols-md="3" md-cols-lg="3" md-cols-sm="3" md-cols-xs="2" md-row-height-gt-sm="6:1" md-row-height="7:1" md-gutter="33px">
<md-grid-tile ng-repeat="language in vm.languages" class="language">
<a data-ng-click="vm.changeLanguage(language.key)"><span ng-bind="language.language | humanize"></span></a>
</md-grid-tile>
</md-grid-list>
The order in which you are loading your css,js dependencies could be causing this problem.
If you can move your material library dependency closer to the initial loading of the page, it may fix this. You could test this by putting jquery and material libraries inside your html head as one of your first dependencies to load. These dependencies being global to your app or just on your component can also cause this to happen. Again, you can test that with the previously mentioned approach.
I have also fixed a flavor of this problem naturally by using *ngIf in a div container wrapper around my html and that seemed to allow the dependencies for the site to load prior to showing any content. I would still try rearranging my dependencies, though.
Related
I am currently working on a website which supports two languages. Angular translate is working fine for my whole website, but i can not figure out a way to apply it for md-tab .
<md-tab label="Shops Near by">
In my translateProvider.translations() i have a variable SHOPS_NEAR_BY with its translation to both the languages. In normal conditions i can use something like :
<span translate="SHOPS_NEAR_BY ">
and translate will change the value when required.
Can someone help me out with how to apply the same for md-tab ?
The following should work:
<md-tab label="{{'SHOPS_NEAR_BY' | translate}}">
If it still not showing translation then you must be asynchronously loading those. So for that after resolve of $translate.use(/lang) call $translate(). To avoid flashing of translations keys & values you can use translate-cloak directive.
Plunker Example
translate-cloak detail Example
Check this github discussion about similar issue
I would need to add an autocomplete chips component in our Angular 1.6 application. We are using Typescript, Webpack 2. As we are already using angular-ui-bootstrap, we do not want to introduce also angular-material in order to avoid style conflicts. However the wished result is exactly what material chips provide.
Is there a directive or component that i can use in my case? I found this library but it runs endless exceptions when I import it.
unfortunately I could find only partial solutions with bootstrap typehead, but then I would need to implement all the "chips" part, making me think of re-inventing the wheel.
Stack Newb here. I have an identical problem as yours. Here's how I resolved this:
1. Resolve the ReferenceError: error is not defined within the angular-chips library
The library you used (angular-chips) wasn't designed with typescript in mind. So, you'll first need to resolve the following error ReferenceError: error is not defined by defining it for them in the line above with var error;. This should prepare angular-chips for your webpack useage.
The second issue you'll find is how to add your typeahead-template-url with webpack in the mix. Rather than referring to a separate html file, use an inline template as referenced here: Bootstrap-UI Typeahead display more than one property in results list?.
If you're lazy like me and don't want to follow that hyperlink, use this as example:
2. Template to be added before the <chips> tag:
<script type="text/ng-template" id="yourTemplate.html">
<a tabindex="-1">
<i ng-class="'icon-'+match.model.type"></i>
<span ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span>
</a>
</scrip>
3. Include template in your directive:
typeahead-template-url:"yourTemplate.html"
Worked like a charm for me.
I currently building a mobile hybrid application using Material Design Lite but I've encountered a slight issue. When I'm adding input field elements to my pages, the floating text or even the placeholder does not work correctly.
I'm using $stateProvider and $urlRouterProvider in my application for page navigation. Inside my index.html I have <div ui-view></div> in which I inject my views when my states change using <a ui-sref="home">Home</a> for example.
The problem I'm having is that if insert the following code into index.html outside of the ui-view of course:
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
The floating label works no problem. However, if I place the same code inside a view (external page that is later injected inside the ui-view element after page navigation occurs), the floating label does not work correctly. The label does not float up, and the text entered is unreadable.
There are no errors displayed in my console and I can't seem to figure out why it won't work. The JS files and CSS are loaded in correctly.
Hopefully someone can help me out with this.
Thanks everyone!
You have to upgrade the elements using "componentHandler.upgradeElements()"
I'm new on Angular JS + Bootstrap 3 and I'm trying to do something for maps. the thing is that I need to open a modal, and then from a button of that modal open another modal.
This is the external html:
<div class="modal-header">
<h1>Editor<h1>
</div>
<div class="modal-body" >
<button class="btn btn-primary" ng-click="treureModalEdit()" data-dismiss="modal">Afegir Punt</button>
</div>`
Here is my example: http://plnkr.co/edit/Zx68EQ?p=info
If something does not load is because libraries, but i only need help where the button 'Posa Marcador!' is.
Some code is in catalan, sorry if that discourages you to help me.
Thank you!
If you inspect with your browser's developer tools the first modal that you open you will see that the markup for this modal is appended to the end of your HTML body, which means that the modal is not nested in your <div ng-controller="DialogDemoCtrl">. This in turn means that the modal does not have a controller of its own, and therefore cannot "understand" the ng-click="treureModalEdit()" you have defined for your button.
In order to fix this problem you should create a second controller and use it for your modal. The treureModalEdit() would then be placed into that second controller.
A few other comments I have on your code:
You use things like data-toggle="modal" data-target="#modalEdit", however this is how you would be opening your modal if you did not have an Angular application. In your Angular application what you actually use is the ng-click="func()" you have put on the button. You can therefore clean all this dead code from your HTML (data attributes and modal template).
If you are new to Angular I would suggest using a newer version in order to avoid any problems which might be fixed in newer versions. You can use the latest version (1.4.0) or a 1.2.x version is you need to support IE8 (which is not officially supported since Angular version 1.3.x.
I have a few bits of HTML like
<p class="noresults">{{numberOfContacts}} Results Are Available</p>
Is it possible for me to hide {{numberOfContacts}} until Angular has loaded? So it would just say Results Are Available
I've seem some solutions such as hiding the entire body until Angular has loaded, but I'd rather not do that if possible.
Yes, use ng-cloak. Simply add class="ng-cloak" or ng-cloak to an element like this
Using directive <div ng-cloak></div>
Using class <div class="ng-cloak"></div>
It's simply a set of CSS rules with display: none !important and as Angular has rendered your DOM it removes the ng-cloak so an element is visible.
use <span ng-bind="numberOfContacts" /> instead of {{numberOfContacts}}
Sometimes, even if I used the ng-cloak, I could still see the braces for a few seconds. Adding the following style resolved my issue:
[ng-cloak]
{
display: none !important;
}
Please see this link link for more explanation.
Hope it helps :D
This is typically only an issue when working with complex content on really slow devices. In those instances, there can be a brief moment when the browser displays the HTML in the document while AngularJS is parsing the HTML, getting ready, and processing the directives. In this interval of time, any inline template expressions you have defined will be visible to the user. Most devices nowadays have pretty good browsers which are quick enough to prevent this from being an issue. There are two ways to solve the problem.
Avoid using inline template expressions and stick with ng-bind directive.
(Best) Use the ng-cloak directive which will hide the content until Angular has finished processing it. Basically, the ng-cloak directive uses CSS to hide the elements and angular removes the CSS class when the content has been processed, ensuring that the user never sees the {{ and }} characters of a template expression.
One strategy to consider is using the ng-cloak directly to the body element, which will ensure that the user will see an empty browser while AngularJS loads. However, you can be more specific by applying it to parts of the document where there are inline expressions.
I have seen issues with ng-cloak not working when added to an element. In the past, I have worked around this issue by simply adding ng-cloak class to element.
You can use ng-bind instead of expression like
<span ng-bind="data"></span>