Basically this is my code:
<div class="container">
<div [hidden]="loggedIn">
<md-grid-list cols="6" [style.margin-top]="'20px'">
<md-grid-tile [colspan]="1"></md-grid-tile>
And I have already added the md-input-container for instance into my style.css file. When I ran my Angular 2 in terminal it said compile successfully. But when I open my chrome to see the actual website. It does have errors shown below:
Uncaught Error: Template parse errors:
Can't bind to 'colspan' since it isn't a known property of 'md-grid-tile'.
1. If 'md-grid-tile' is an Angular component and it has 'colspan' input, then `verify that
it is part of this module.
2. If 'md-grid-tile' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to
the '#NgModule.schemas' of this component to suppress this message.
You need to use it as, otherwise it will take it as a input property which you need to declare inside the component
<md-grid-tile colspan="1"></md-grid-tile>
When you enter
[colspan]="1"
It expects a variable from the component, what you need is
colspan="1"
Related
I'am trying to upgrade my materializecss from 0.100.1 to 1.0.0. I followed the upgrade guide and applied all the changes to my code but I am still facing multiple javascript errors. In our application we are using vue 2.6.10.
Tabs:
Our tabs are rendered by a vue component:
<ul class="tabs timerange" id="timeTab" style="width: 90%">
<input type="hidden" id="time" v-model="$parent.syncData.currentTime">
<li style="width:75px; display: inline-block" v-bind:data-time="value"
v-for="(value,key) in $parent.syncData.timeGrid"
class="tab">
<a class="text-black" v-bind:href="'#tab_'+key"
v-on:click="$parent.setTime(value)">{{value}} h</a>
</li>
</ul>
Then they get initialized in a separate javascript with jquery:
$(document).ready(function() {
$('#timeTab').tabs();
});
This results in the following error:
I've already tried initializing them in the created() and updated() callbacks of the vue component but without success.
Dropdown:
For dropdowns I get the following error:
This error is reproducible when I comment my code for the dropdown and replace it with the example code from the materializecss docs.
How can I fix these kind of errors or where is a good start to debug?
We had some duplicate initializations within the code. As well as some were initialized with jquery and some not. Cleaning up the initialization and only initializing the components once without jquery fixed the errors.
materializecss checks if already instances for the given elements exists and if they do they will be destroyed and reinitialized but within the destroy process we got the errors.
I ran into a problem in the browser IE11. The project is in Angular 2/4.
Error: Multiple definitions of a property not allowed in strict mode.
In file main.bundle.js
I had the same issue, It is because I tried to use some code like a case on ng-class attribute.
To solved I just change this
<div class="imgComment" ng-class="[{'.jpg':'imgJpg',
'.csv':'imgCsv',
'.xls':'imgXls',
'.xlsx':'imgXlsx',
'.doc':'imgDoc',
'.docx':'imgDocx',
'.msg':'imgMsg',
'.png':'imgPng',
'.pdf':'imgPdf',
'.jpg':'imgJpg',
'.jpeg':'imgJpeg',
'.zip':'imgZip',
'.rar':'imgRar',
'.txt':'imgTxt'}['{{f.fileExtension}}']]"
title="{{f.originalFileName}}" ng-click="showImage(f.sharePointPath)">
</div>
for this
<div class="imgComment {{f.style}}" title="{{f.originalFileName}}" ng-click="showImage(f.sharePointPath)"></div>
and send the class in f.Style attribute
I don't know if the problem was because I put 2 '.jpg' options in the case of the ng-class, I just change the code and works.
I have been following a pluralsight course called Creating Apps with Angular, Node and Token Authentication, and am writing my own custom alert messaging.
Basically, what I want to do, is to add different CSS classes depending on the state of the alert message.
When I load my app, I get the following error in the console:
Error: [$parse:syntax] Syntax Error: Token '}' is unexpected, expecting [:] at column 83 of the expression [{'flipInY': alert.show, 'flipOutY':!alert.show, 'alert-hidden:!alert.hasBeenShown'}] starting at [}]
I don't understand, since I'm pretty sure my syntax is correct. Can anybody point out what I'm doing wrong?
My html:
<div class="container" ng-cloak>
<div ui-view></div>
<div class="alert alert-{{alert.type}} animated main-alert" ng-class="{'flipInY': alert.show, 'flipOutY':!alert.show, 'alert-hidden:!alert.hasBeenShown'}"><strong>{{ alert.title }}</strong>
{{ alert.message }}
</div>
</div>
If you need more details, please ask, or check the Github repo. The relevant files are index.html in the root folder, register.js under app/scripts/controllers and alert.js under app/scripts/services.
Thanks for the help.
Change this:
'alert-hidden:!alert.hasBeenShown'
to this:
'alert-hidden':!alert.hasBeenShown
You missed a closing single-quote in property name.
I'm using ng-attr-data-index={{$index}} in here:
<div class="entry__row" ng-repeat-n="entryRows" ng-attr-data-index={{$index}}>
...
</div>
Now, angular added data-index=0 (and so on) properly, but ng-attr-data-index={{$index}} is still there, and I get this error from console:
TypeError: t.removeAttribute is not a function
Also, this is ng-repeat-n: https://github.com/connorbode/angular-repeat-n
I'm using Polymer Web Components.
Whenever I use this.$ I get an error that it is undefined. I also tried this.shadowRoot and it states that it is null.
For example:
Inside a <polymer-element>:
<script>
Polymer({
cardClick: function(event, detail, sender) {
this.$.ordertemplatediv.style.display = 'none';
// the above line gives the following error:
// "Uncaught TypeError: Cannot read property 'style' of undefined"
this.shadowRoot.querySelector('#ordertemplatediv').style.display = 'none';
// the above line gives the following error:
// "Uncaught TypeError: Cannot read property 'style' of null"
}
});
</script>
Inside another <polymer-element> in another file: (closing tags were omitted for clarity)
<template>
<div id="ordertemplatediv">
<template repeat="{{item in items}}">
<!-- some irrelevant elements -->
Both files' root element is <polymer-element>.
I tried using this.$ many times in different situations in this project but it never worked. Any ideas?
Any help would be appreciated.
EDIT 1 - CONTEXT
This is what I actually want to do:
I have 3 <polymer-elements> which we will call <list-1>, <l-card> and <list-2>.
<list-1> looks something like this: (closing tags were omitted for clarity)
<polymer-element name="list-1">
<template>
<template repeat="{{post in posts}}">
<l-card>
<l-card> contains the <script> above.
<list-2> contains the <template> above.
I want <list-2> to be refreshed (data reloaded) when an <l-card> in <list-2> is clicked (or tapped).
If you're separating the Polymer() call and the <polymer-element> it registers, you'll need to pass the name of the element:
Polymer('your-element', {
...
});
Otherwise, you'll need to put the <template> inside the <polymer-element> so the nameless registration works.