I have a problem with a ngClass and a function with building an app with Ionic 2 and Firebase.
The function does work, but the value of the function does not come in the HTML code. I have used this as an example: https://codepen.io/andre13/pen/oecgi.
The html and the call for the function looks like this:
<button ion-button class="chatbutton" [ngClass]="compareUser(user.$key)"
(click)="gotoDoctorChat(user.$key)" >{{user.naam}} </button>
The function looks like this:
compareUser(uid){
this.angFire.database.object('/users/' + uid +'/'+ this.coach1+'red').subscribe(snapshot=>{
console.log("snapshot.tostring = " + snapshot.$value);
if(snapshot.$value === '0'){
return 'unread';
}else{
return null;
}
})
};
The CSS looks like this:
.unread{
background-color: red!important;
}
Please ask if something is not clear.
Try enclosed by single quote (') like this
return "'unread'";
and also make sure you have imported the correct module in the main component
import { NgClass } from '#angular/common';
The reason is because function compareUser always returns undefined before the internal function call is resolved.
You can test this with:
console.log(compareUser(aUID));
Difficult to suggest an alternative without knowing more of your logic/requirements.
Related
Is that possible to have two functions inside HTML element but to run only one of them according to a condition? for example:
<Button (click)="aFunction() ? anotherFucntion()">Hi</Button>
i think you want someThing Like This
export class AppComponent {
someFlag: boolean = false;
firstFunction() {
console.log('hi i am from first Function');
}
secondFunction() {
console.log('hi i am from Second Function');
}
}
<button (click)="someFlag ? firstFunction() : secondFunction()">Hi</button>
but i would prefer if the code in the Component Like This
doTheWork() {
return this.someFlag ? this.firstFunction() : this.secondFunction();
}
and then just call it in the html Like this
<button (click)="doTheWork()">Hi</button>
you can test the code here
I would like to get the content of my textarea when onkeyup event triggered.
I tried this:
<textarea onkeyup="getContent(this)"></textarea>
function getContent(txtBeschreibung) {
console.log(
txtBeschreibung.val()
)
}
but my output is this:
TypeError: txtBeschreibung.val is not a function. (In 'txtBeschreibung.val()', 'txtBeschreibung.val' is undefined)
Where is my mistake? :/
I was able to get your code to run with minor modifications
function getContent(txtBeschreibung) {
let val = $(txtBeschreibung).val();
console.log(val);
}
It looks like you need to wrap the reference (this) in a dollar-sign to perform jQuery operations on it.
txtBeschreibung isn't a jQuery object, to use jQuery, you could do this
function getContent(txtBeschreibung) {
console.log($(txtBeschreibung).val());
}
or in Vanilla JS:
function getContent(txtBeschreibung) {
console.log(txtBeschreibung.value);
}
I have inherited a mess of a Angular project. I've never really messed with Angular too much but know MVC well enough to feel like I can learn. My question is I have a property of a JSON object that I want to return a different views for. (one is an archived state and one is a non-archived state) As they both have different view templates, how would I return the non-archive template if the json.status == 'archived'
I have the following as my current StateProvider's templateURL property.
templateUrl: appConfig.viewPath + 'non-archived.html?v=' + appConfig.version
should I just return multiple template urls here? Or do I have to create a whole new url path?
Thanks!
I've gone down this road a few times, I don't think I've found the optimal way yet, but I've learned a few things.
It really all depends on when you have access to your json-object. You can pass a function to templateUrl, and send in a service.. (A service that returns your current json-object could be great, but how would you update it? Probably when you change route right? Then you have a egg-hen problem. You can't decide route until you have the json-object, but you don't have the json-object until you change route.)
But IF you have access to the json-object you could do something like this:
templateUrl: function(){
var tpl = (json.status == 'archived') ? 'archived.html?v=' : 'non-archived.html?v=';
return appConfig.viewPath + tpl + appConfig.version
}
But my guess is that you don't have access to the json-object until after the route has loaded.
Then I'd say the easiest way (but maybe not so pretty) is to have just one template. $scope.json = json in the controller:
<div ng-if="json.status == 'archived'">
<h1>ARCHIVED</h1>
...
</div>
<div ng-if="json.status != 'archived'">
<h1>NOT ARCHIVED</h1>
...
</div>
Or if you think that is too cheap, declare two routes. The whole "create a whole new url path" is not as painful as you might think. It'll be considerably less complex than trying to wedge out a value from a route before it has loaded.
1: Try this. send json.status in $stateParams and apply condition inside stateProvider :
$stateProvider.state('home', {
templateProvider: ['$stateParams', 'restService' , function ($stateParams, restService) {
restService.getJson().then(function(json) {
if (status.status == 'archived') {
return '<div ng-include="first.html"></div>';
} else {
return '<div ng-include="second.html"></div>';
}
})
}]
});
2 : or simply in view you can try this:
<div ng-if="json.status == 'archived'">
<h1>ARCHIVED</h1>
...
</div>
<div ng-if="json.status != 'archived'">
<h1>NOT ARCHIVED</h1>
...
</div>
I am using angular js one of my project and I call "ng-click" function as below
<a ng-click="logout'{{x.ParentEntityId['#text']}}')" target="_blank">{{x.Title["#text"]}}</a>
In "x.ParentEntityId['#text']" value is "7560183E-1C37-40FE-BACC-8A5B5021FBD7"
When my page load I am getting below error.
When I passed static value in logout function it working perfectly. Like as below
<a ng-click="logout('hi')" target="_blank">{{x.Title["#text"]}}</a>
Logout function as below:
$scope.logout = function (item) {
alert('logout' + item);
};
Please let me know if I am missing something.
In ng-click you are in the angular context, so you haven't to use {{}}.
Your ng-click: logout'{{x.ParentEntityId['#text']}}') is syntactically incorrect, missing a (.
It should be like ng-click="logout(x.ParentEntityId['#text'])".
hey man, I think you error is clear, in the ng-click directive as you wrote
<a ng-click="logout'{{x.ParentEntityId['#text']}}')"...>
so, after logout is missing the ( sign for the function and I think you wont need to create an expression {{}} inside the function parameter because on the angular directives you dont need to send the value inside {{}} because it knows it is a variable and it will receive the values as logout('something').
so for example you need to put as below:
<a ng-click="logout(x.ParentEntityId['#text'])" target="_blank">{{x.Title["#text"]}}</a>
I am trying to get two function to work on one onsubmit, I made this code:
onsubmit="return validateForm1(); return validateForm2()">
but this makes validateForm1() function just work and validateForm2() doesn't ,
how to make both functions work.
You can't return 2 times in a row. First return will complete the logic of your function.
Instead you should use something like this:
var myElement = document.getElementById("myElement");
myElement.onsubmit = function(){
validateForm1();
validateForm2();
}
Also you shouldn't use inline javascript the way you do this right now. I think you might find this article useful.
You can't have to functions returning at this point. You could use the result of both in a combined call:
function validateBoth() {
return validateForm1() && validateForm2();
}