I am developing an IONIC project on iot relay switch. ( any help will be appreciated)
Whenever i am triggering a url, either it is opening in same app or launching a new browser.
but my need is that, it should trigger a url but it should not open anywhere.
I have a basic code like this:
<ion-header>
<ion-navbar>
<ion-title>
IOT Project
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h3 text-center> Basic Switch </h3>
<hr>
<p>
<a href="http://192.168.1.5/gpio?state_12=0" target = nobrowser>switch On</a><br><br>
<a href="http://192.168.1.5/gpio?state_12=1" target = nobrowser>switch Off</a>
</p>
</ion-content>
Use HTTP for this. If just want to hit the url, try this.
HTML
<button (click)="call(0)">switch On</button>
<button (click)="call(1)">switch Off</button>
TS
call(id) {
this.http.get(`http://192.168.1.5/gpio?state_12=${id}`);
}
Related
I have ionic side menu that closes fine on clicking ion-item in chrome browser. But it doesn't show the same behaviour in samsung browser. It doesn't close once opened. I tried to close using code also. But it's not closing. I wrapped the ion-item in ion-menu-toggle like this
<ion-list>
<ion-menu-toggle>
<ion-item lines="none" routerLink="/home">
<ion-icon name="business" color="secondary" slot="start"></ion-icon>
<ion-label>Business</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
someone explain me the issue and help me out
you can try this code maybe it is work's for you
<ion-menu-toggle menu="first" autoHide="false">
I am using ng2-ionic-rating plugin but it is giving error when I am building my apk using
ionic cordova build android --prod
the error is shown below
'rating' is not a known element: 1. If 'rating' is an Angular component,
then verify that it is part of this
module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the
'#NgModule.schemas' of this component. ("
<ion-card padding> <h1>Rate this App</h1> [ERROR ->]<rating
[(ngModel)]="rate" max="5"
emptyStarIconName="star-outline" halfStarIconName="star-half" ")
The html code is
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-card padding>
<h1>Rate this App</h1>
<rating [(ngModel)]="rate" max="5" emptyStarIconName="star-outline"
halfStarIconName="star-half" starIconName="star" nullable="false"
(ngModelChange)="onModelChange($event)">
</rating>
<ion-input [(ngModel)]="reason" placeholder="Please Give your reason">
</ion-input>
<button ion-button small round
(click)="resolveRec()">Feedback</button>
</ion-card>
</ion-content>
You should add Ionic2RatingModule to the imports array in app.module.ts.
If you are getting the same error again the reason is the version of Ionic2RatingModule is not supported. Try downgrading the version of Ionic2RatingModule to a miner version.
Working Example
I have a mobile app/website (in Ionic 3.25) under construction and wanted to support the desktop web browser experience without wasting all that screen space. I stumbled across Ion-Split-Pane. It seemed perfect from the documentation, allowing me to pop open the sidemenu as a full menu when a large screen was used. I set the code as recommended in the app.html file:
<ion-split-pane when="md">
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
</ion-split-pane>
The behavior I'm getting when using Ionic Serve is baffling. When I use a large screen (above somewhere around 922 pixels wide), I get a three pane experience, with a bunch of whitespace containing nothing in the far right. This was surprising, since I thought the app would use the available space:
When I then shrink below that size, the entire website/app disappears. The elements are still in the html, but nothing is drawn to the screen.
This behavior is so far from the documentation that I must have something wrong, but I'm not certain what. Anyone know how I could get this panel working?
After working on this for a while, I discovered my problem. It isn't mentioned explicitly in the documentation, so I'll post the answer here in case anyone else runs into it.
When converting a side-menu project to use Ion-Split-Pane, the content section needs to have the main keyword added to the <ion-nav> object. #content and [root] are not enough.
The amended code:
<ion-split-pane when="md">
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" main #content swipeBackEnabled="false"></ion-nav>
</ion-split-pane>
Without that line, the entire application is thrown into the 'menu' pane and simply disappears when going to the mobile view.
When I minimize my Ionic app and open it after sometime, everything works except top left menu button and Android hardware back button.
I am unable to figure out the reason. I have to kill my app and reopen it then it works. Do I need to write any code or I need to do something else?
Below is my home.html header code:
<ion-header>
<ion-navbar color="headercolor" style="width:100%;">
<ion-title *ngIf="!toggled"><span style="color:orange;font-weight:bold;font-size:20px;">Dash</span><span style="color:#5990AE;font-weight:bold;font-size:20px;">board</span></ion-title>
<button ion-button menuToggle *ngIf="!toggled">
<ion-icon name="menu" class="icon" style="color: #ffffff;font-size:17px;"></ion-icon>
</button>
<ion-searchbar *ngIf="toggled" [showCancelButton]="true" [(ngModel)]="searchTerm" (ionCancel)="togglesearch()" (ionInput)="getItems($event)"></ion-searchbar>
<ion-buttons end *ngIf="!toggled">
<button ion-button icon-only (click)="togglesearch()">
<ion-icon name="search" class="icon" style="font-size:16px;"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
I have a very simple app so far, but I can't figure out how to fix the overlapping of the content (header on top of the content). I have created a component header that contains the header as the name suggest.
header.html
<ion-header>
<ion-navbar color="dark">
<ion-title>
Some Title
</ion-title>
</ion-navbar>
</ion-header>
I have been trying to use it on different pages, but it always overlaps the content of the page.
page.html
<app-header></app-header>
<ion-content padding>
<h1>Some Page</h1>
</ion-content>
I have tried using div tag instead of ion-content, and also tried using class="has-header", but nothing seems to be working. Although, if don't use the header as a component such as the following, it works fine. But I want to use the header as a component so that I can reuse it on other pages.
page.html (don't want to have it like this)
<ion-header>
<ion-navbar color="dark">
<ion-title>
Some Title
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h1>Some Page</h1>
</ion-content>
As pointed out in this thread of Ionic official forum by #brandyshea of Ionic team, the thing is that in one page you can only have 3 kind of tags as top tags, everything else must go inside one of them. The 3 tags are:
<ion-header></ion-header>
<ion-content></ion-content>
<ion-footer></ion-footer>
I was trying to organize my app as #Hafiz and stumbled on the same problem, the solution has been to put my custom header (<ew-navigazione-top>) inside <ion-header> in each page.
<ion-header>
<ew-navigazione-top [ew_title]="navParams.get('label')" [ew_subtitle]="The subtitle"></ew-navigazione-top>
</ion-header>
P.S. This is the solution for Ionic 3. For previous versions on the same linked thread you can find other specific solutions.
try with below :
<app-header></app-header>
<ion-content style="margin-top:__px">
<h1>Some Page</h1>
</ion-content>