I'm new to Ionic. I have been trying to load several HTML files into the ion-slide. I already try out several solutions like this and this. Here is my code
<ion-view style="" title="Forum">
<ion-content class="has-header" padding="true" >
<ion-slide-box>
<ion-slide>
<h3 class="text-center">slide2</h3>
<ng-include src="'tes.html'"></ng-include>
</ion-slide>
<ion-slide>
<h3 class="text-center">slide3</h3
<ng-include src="'tes2.html'"></ng-include>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-view>
The problem is that the page only shows the slide2 word and can be slide to slide3 but all of that slide do not content the HTML. The thing is that i'm still experimenting it on firefox browser. Is it because the browser or is there any special restriction for ng-include? Plunker
Related
In my project I am tasked to create a scrollable filter buttons for a list. I was thinking to use either ion-slides or ion-segment, but using ion-slides gives me no option for segment changing, while ion-segment does not fit the requirement on the design (3.5 buttons showed before scrolling, accurate margins). Therefore I come up with this:
<ion-segment scrollable="true" (ionChange)="segmentChange($event)">
<ion-slides [options]="slideOption">
<ion-slide>
<ion-segment-button class="buttonActive" value="a">A</ion-segment-button>
</ion-slide>
<ion-slide>
<ion-segment-button class="button" value="b">B</ion-segment-button>
</ion-slide>
<ion-slide>
<ion-segment-button class="button" value="c">C</ion-segment-button>
</ion-slide>
<ion-slide>
<ion-segment-button class="button" value="d">D</ion-segment-button>
</ion-slide>
</ion-slides>
</ion-segment>
I am wondering if my approach is correct or there are a simpler solution. This method also gives me a problem of unable to create padding inside the ion-segment (I tried putting ion-label inside but cannot create whitespace so that the text become more centered)
You are closing your button in down line. Close on the same line.
I work on a Ionic v3 app and I'm trying to display HTML in a *ngFor.
I've my TestPage.html with :
<ion-list *ngFor="let c of cities">
<ion-item>
<div [innerHTML]="c.html_rate"></div>
</ion-item>
</ion-list>
In c.html_rate I've some <ion-icon name="star-half"></ion-icon>.
But on the screen nothing appear...
I've also try: <div [innerHTML]="sanitizer.bypassSecurityTrustHtml(c.html_rate)"></div>
But that does not work...
As shown in another question ion-item can only render particular elements. You are attempting to render an ion-icon within the ion-item component which doesn't work.
You can test this is true simply by replacing what is being injected into your div. If you swap <ion-icon name="star-half"></ion-icon> for <ion-note>Testing</ion-note>
Screenshot of original card
I'm just copying the HTML code of ionic components into my App, but it is not styling like original sample.
<ion-view view-title="About us">
<ion-content padding>
<h1>About us</h1>
<ion-card>
<ion-card-header>
Header
</ion-card-header>
<ion-card-content>
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
</ion-card-content>
</ion-card>
</ion-content>
</ion-view>
but it returns me this Screenshot of result page
I've checked all css and js is working on page, except ionic components.
Okay, I've got the problem. It's the different documentations for ionic v1 and v2 but google only list ionic v2 docs.
http://ionicframework.com/docs/v1/components
http://ionicframework.com/docs/components
Thanks to all for your time.
When parsing rss feed in xml format, I display the images that are contained in the attibute url inside the tag <enclosure> but whenever the tag enclosure is missing because the article does not have an image, I'm getting an error in the console saying:
Cannot read property 'getAttribute' of undefined
I tried to solve this problem using onError function inside src but when the tag is missing I'm still getting the error in the console and the placeholder image is not shown.
Here's my html file:
<ion-header>
<ion-navbar color="primary">
<ion-title text-center>
App Name
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let entry of entries" (click)="openPage(entry)" text-wrap>
<ion-thumbnail>
<img class="imgmg" src="{{entry.getElementsByTagName('enclosure')[0].getAttribute('url')}}" onError="this.src='assets/images/placeholder_image.png';" >
</ion-thumbnail>
<h2 class="title">{{entry.getElementsByTagName('title')[0].textContent}}</h2>
</ion-item>
</ion-list>
</ion-content>
You can use *ngif. example:
<img *ngIf="entry.getElementsByTagName('enclosure')[0].getAttribute('url')" class="imgmg" src="{{entry.getElementsByTagName('enclosure')[0].getAttribute('url')}}">
<img *ngIf="!entry.getElementsByTagName('enclosure')[0].getAttribute('url')" class="imgmg" src="assets/images/placeholder_image.png">
also check this link
EDIT:
<img *ngIf="image_available" class="imgmg" src="{{entry.getElementsByTagName('enclosure')[0].getAttribute('url')}}">
<img *ngIf="!image_available" class="imgmg" src="assets/images/placeholder_image.png">
I created a navigation bar using ionic-nav-bar. Added an h1 element with class title. But it's not displaying anything.
Here's my code
<ion-pane>
<ion-nav-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-nav-bar>
<ion-content>
</ion-content>
</ion-pane>
However, this is working:
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
So what am i doing wrong?
<ion-nav-bar class="bar-positive">
<ion-nav-title>hello</ion-nav-title>
</ion-nav-bar>
This Will solve your problem.
That would be the html file of your view:
<ion-view title='My Title' class="dashboard">
<ion-content>
</ion-content>
</ion-view>
In your case you should wrap all that in an other ion-nav-view-element, because you are using the
ion-nav-bar-element.
The ion-nav-bar will be your navigation bar and you will have ion-views that will be plugged into the ion-content section. You would never want one title if you have a nav bar because the title should change as you navigate across ion-views. When you create you ion-view tag add a view-title attribute. Then when that view is active it will automatically update the header no h1 tag required.
The ion-header approach works because ion-header is designed to be a static and not dynamically update like a navigation header would.
The fact is that your
<h1>Test</h1>
tag is displayed but it is placed behind your <ion-nav-bar></ion-nav-bar>. As Anand suggested in answer above you should use <ion-nav-title>Test</ion-nav-title> to get expected result.
Hope this helps.