I want to do a simple if else in Angular template. I'm using Ionic framework. What I want to do is something like
if (val != null){
document.write("No value");
}
else{
document.write("Has value");
}
What I have now is
<ion-grid *ngIf="devices">
<!-- Show if devices exist -->
<ion-row>
<ion-col>
<ion-list>
<ion-item>
device 1
</ion-item>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid>
<!-- Show if devices DO NOT exist -->
<ion-row>
<ion-col>
<button text-center ion-button round col-6 offset-3> Odśwież urządznia </button>
</ion-col>
</ion-row>
</ion-grid>
I wanted to do something like *ngIf!=null or *ngElse but these two do not work.
So my question is how do I do that?
You have to use in following way -
<div *ngIf="condition; else elseBlock">
Truthy condition
</div>
<ng-template #elseBlock>
False condition
</ng-template>
hope this will help you, let me know in case any issue?
Related
I am working on a point-based question game within Ionic 5 using Angular. I asked previously on how to make the addition button work as intended, and it worked great, but now when trying to use the same methods for point subtraction, I get a "Nan" box.
I have tried to rework my GUI to see if the problem is on that side, but nothing changed.
I am a super beginner at Ionic and HTML in general so my code will probably be pretty garbage. Any help would be great!
Below is the code before any of my modifications.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Point Game</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/#ionic/core#4.7.4/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/#ionic/core#4.7.4/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#ionic/core#4.7.4/css/ionic.bundle.css"/>
<style>
:root {
--ion-safe-area-top: 20px;
--ion-safe-area-bottom: 22px;
}
</style>
<script>
function openMenu() {
document.querySelector('ion-menu-controller').open();
}
function p1point(){
var p1pp = document.getElementById("p1p").innerText; //getting text inside element
p1pp = parseInt(p1pp) + 1; //Increment
document.getElementById("p1p").innerHTML = p1pp; // Writing values
}
function p2point(){
var p2pp = document.getElementById("p2p").innerText; //getting text inside element
p2pp = parseInt(p2pp) + 1; //Increment
document.getElementById("p2p").innerHTML = p2pp; // Writing values
}
function p1minus(){
var p1mm = document.getElementById("p1min").innerText; //getting text inside element
p1mm = parseInt(p1mm) - 1; //Increment
document.getElementById("p1min").innerHTML = p1mm; // Writing values
}
function p2minus(){
var p2mm = document.getElementById("p2min").innerText; //getting text inside element
p2mm = parseInt(p2mm) - 1; //Increment
document.getElementById("p2min").innerHTML = p2mm; // Writing values
}
</script>
</head>
<body>
<ion-app>
<ion-menu side="start">
<ion-header>
<ion-toolbar translucent>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-icon name="home" slot="start"></ion-icon>
<ion-label>Home</ion-label>
</ion-item>
<ion-item>
<ion-icon name="person" slot="start"></ion-icon>
<ion-label>Profile</ion-label>
</ion-item>
<ion-item>
<ion-icon name="chatbubbles" slot="start"></ion-icon>
<ion-label>Messages</ion-label>
</ion-item>
<ion-item>
<ion-icon name="settings" slot="start"></ion-icon>
<ion-label>Settings</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<div class="ion-page" main>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Point Game</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-grid>
<ion-row>
<ion-col>
<ion-card>
<!--Player 1 score-->
<ion-card-header>
<ion-card-subtitle class = "ion-text-center">Player 1</ion-card-subtitle>
<ion-card-title class = "ion-text-center" id = "p1p">0</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
<ion-col size = -1>
<!-- fake inner thing psuedo-col-->
</ion-col>
<ion-col>
<ion-card>
<!--Player 2 score-->
<ion-card-header>
<ion-card-subtitle class = "ion-text-center">Player 2</ion-card-subtitle>
<ion-card-title class = "ion-text-center" id = "p2p">0</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-50 style = "text-align: right">
<ion-button id = "p1plus" onclick="p1point()" > + </ion-button>
</ion-col>
<ion-col size = .15>
<!-- fake inner thing psuedo-col-->
</ion-col>
<ion-col width-50 style = "text-align: right">
<ion-button id = "p2plus" onclick="p2point()"> + </ion-button>
</ion-col>
<ion-col size = -3>
<!-- fake inner thing psuedo-col-->
</ion-col>
</ion-row>
</ion-row>
<ion-row>
<ion-col width-50 style = "text-align: right">
<ion-button id = "p1min" onclick="p1minus()" > - </ion-button>
</ion-col>
<ion-col size = .15>
<!-- fake inner thing psuedo-col-->
</ion-col>
<ion-col width-50 style = "text-align: right">
<ion-button id = "p2min" onclick="p2minus()"> - </ion-button>
</ion-col>
<ion-col size = -3>
<!-- fake inner thing psuedo-col-->
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
</div>
</ion-app>
<ion-menu-controller></ion-menu-controller>
</body>
</html>
I think the problem of your minus functions is that you are getting the innerText of the buttons. You are using p1min and p2min ids, and those texts are not numbers. That is why you are getting NaN.
I'm doing an online bookstore project where you can also mark a book as booked. So I would like to assign a function to a button "mark as booked", once this button is pressed that item will have to have the parameter booked and disappear from the page and go to the "reserved books" page. my data I take from a local json and I do not know how to assign the parameter "booked" and make the item disappear if he had this parameter.
example of my page
html code:
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col *ngFor="let libro of libri; let i =index;" >
<div>
<ion-card-header><h1>{{libro.title}}</h1></ion-card-header>
<ion-card-header (ngModelChange)="setYear($event)"><h3 >Autore:{{libro.author}}</h3></ion-card-header>
<ion-card-header><h4>Anno:{{libro.year}}</h4></ion-card-header>
<div id="immagine">
<img src="../assets/{{libro.imageLink}}">
</div>
<button ion-button (click)="modificaItem(libro)" color="">Modify</button>
<button ion-button (click)="remove(i);" color="danger" >Mark as booked</button>
<button ion-button color="{{libro.prenotato ? 'danger' : 'secondary'}}">Status</button>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
(click)="remove(i);" is a provvisory function
I'm making an template for an app, and i need to show a select component when one of the previous radio buttons is set in a determined state. The logic is this:
The current code I have got is this:
<ion-row>
<ion-list radio-group [(ngModel)]="tipo">
<ion-item>
<ion-label>Gato</ion-label>
<ion-radio value="g" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>Perro</ion-label>
<ion-radio value="p"></ion-radio>
</ion-item>
</ion-list>
<div ng-if="tipo === 'g'">
<ion-list>
<ion-item>
<ion-label>Choose</ion-label>
<ion-select [(ngModel)]="raza1">
<ion-option value="angora">angora</ion-option>
<ion-option value="persa">persa </ion-option>
</ion-select>
</ion-item>
</ion-list>
</div>
<div ng-if="tipo === 'p'">
<ion-list>
<ion-item>
<ion-label>Choose</ion-label>
<ion-select [(ngModel)]="raza2">
<ion-option value="pastor aleman">Pastor Aleman</ion-option>
<ion-option value="schnauzer">schnauzer</ion-option>
</ion-select>
</ion-item>
</ion-list>
</div>
</ion-row>
So long I haven't reached the ng-if to work and I don't know why. If you could help me figure out why. Thanks
Most of the time, these kind of issues are related to javascript references. instead of
$scope.tipo, use
$scope.someNamespace = {
tipo: ''
};
then use someNamespace.tipo instead of tipo in html
I have a div that repeats using an *ngFor. So there are multiple div's on my page. Within each of these div's, there several more element's that also toggle. So we have collapsible fields within other collapsible fields. Each item allows the parent to collapse all children, but also the children to expand/collapse individually.
The problem is that when multiple item are generated using the *ngFor, the toggle function to expand/collapse the fields applies to all the items on the page. I want the toggle to work for only that specific item.
Here is a snippet of the HTML/AngularJS code:
<div padding>
<div *ngFor="let item of ItemsList">
<div>
<ion-grid>
<ion-row>
<ion-col>
{{item.information}}
</ion-col>
<ion-col>
{{item.information}}
</ion-col>
<ion-col>
{{item.information}}
</ion-col>
<ion-col>
{{item.information}}
</ion-col>
<ion-col>
<a *ngIf="!expandItem" (click)="toggleItem('down')">
<ion-icon class="fa fa-angle-double-down fa-2x"></ion-icon>
</a>
<a *ngIf="expandItem" (click)="toggleItem('up')">
<ion-icon class="fa fa-angle-double-up fa-2x"></ion-icon>
</a>
</ion-col>
</ion-row>
<div>
...
...
...
<ion-col>
<a *ngIf="!expandField1" (click)="toggleField1('down')">
<ion-icon class="fa fa-angle-double-down fa-2x"></ion-icon>
</a>
<a *ngIf="expandField1" (click)="toggleField1('up')">
<ion-icon class="fa fa-angle-double-up fa-2x"></ion-icon>
</a>
</ion-col>
<ion-grid *ngIf ="expandField1 || (expandItem && expandField1)">
<ion-row *ngFor="let subItem of item.subItem">
<ion-col>
{{subItem.name}}
</ion-col>
<ion-col>
{{subItem.name}}
</ion-col>
<ion-col>
{{subItem.name}}
</ion-col>
</ion-row>
</ion-grid>
</div>
</div>
Here is a snippet of the toggle functions
toggleItem(type: any) {
if (type == 'up') {
this.expandItem = false;
this.expandField1 = false;
} else {
this.expandItem = true;
this.expandField1 = true;
}
toggleField1(type: any) {
if (type == 'up') {
this.expandField1 = false;
} else {
this.expandField1 = true;
this.expandItem = true;
}
Any questions please ask.
you will have to use an array of expandItem and expandField1 to track opening and closing of each collapsible. For this you can use $index and then set array for it like expandItem[$index] = true for a particular collabsible on click.
I am fetching data from a REST API, and I am receive a JSON that has the following format:
[Object]
0:Object
createdAt:"2016-05-04T16:32"
list:Array[4]
0:"Mango"
1:"Apple"
2:"Banana"
3:"Kiwi"
Currently, the following is printed when calling that JSON in the HTML file:
Mango,Apple,Banana,Kiwi
Here is the JS code used to retrieve data from the REST API:
this.http.get('https://example.com/api').subscribe(data => {
this.categories = data.json().results;
});
The current HTML/Angular code:
<div *ngFor="#fruit of categories">
<ion-row>
<ion-col>
<div class="txt">{{fruit.list}}</div>
</ion-col>
</ion-row>
</div>
The final Result of what I want to achieve is the following:
<div>
<ion-row>
<ion-col>
<div class="txt">Mango</div>
</ion-col>
<ion-col>
<div class="txt">Apple</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div class="txt">Banana</div>
</ion-col>
<ion-col>
<div class="txt">Kiwi</div>
</ion-col>
</ion-row>
</div>
Can you please tell me how to achieve that? Do I need to change something on the JSON itself? Or it can be done simply by tweaking the *ngFor?
I would create a new object to gather elements:
this.service.getFruits().subscribe(categories => {
let fruits = categories.list;
let fruitsByGroup = [];
fruits.forEach((fruit, index) => {
let groupIndex = Math.floor(index/2);
if (index%2 === 0) {
fruitsByGroup[groupIndex] = [];
}
fruitsByGroup[groupIndex].push(fruit);
});
this.fruitsByGroup = fruitsByGroup;
});
Then I would iterate this way:
<div *ngFor="#fruitGroup of fruitsByGroup">
<ion-row *ngFor="#fruit of fruitGroup">
<ion-col>
<div class="txt">{{fruit.list}}</div>
</ion-col>
</ion-row>
</div>
You could do something like this using an ng-repeat:
<div>
<ion-row ng-repeat="fruit in categories.list">
<ion-col>
<div class="txt">{{fruit}}</div>
</ion-col>
</ion-row>
</div>
The main complication that will come out of this, is separating them out into different rows. If there aren't too many items you're dealing with, you could try something like this:
<div>
<ion-row ng-repeat="fruit in categories.list.slice(0,1)">
<ion-col>
<div class="txt">{{fruit}}</div>
</ion-col>
</ion-row>
<ion-row ng-repeat="fruit in categories.list.slice(2,3)">
<ion-col>
<div class="txt">{{fruit}}</div>
</ion-col>
</ion-row>
</div>
Does this answer your question?
You can do this using nested ngFor
<div *ngFor="#fruit of categories">
<ion-row>
<ion-col *ngFor="#item of fruit.list">
<div class="txt">
{{item}}
</div>
</ion-col>
</ion-row>
</div>
In you rest calling code
this.http.get('https://example.com/api').subscribe(data => {
this.categories = data.json().results[0].list;
});
In your HTML code
<div *ngFor="#fruit of categories">
<ion-row>
<ion-col>
<div class="txt">{{fruit[0]}}</div>
</ion-col>
</ion-row>
</div>