I'm quite new to Ionic.
I'm displaying a name in an item. Name is defined in my class as :
public user : String = "Jean Richard";
And displayed using html :
<ion-content>
<ion-item-group>
<ion-item>
{{user}}
</ion-item>
</ion-item-group>
</ion-content>
It's very simple, but I get this in my app :
There is no more space between 'Jean' and 'Richard'.
Why?
Most likely this isn't an ionic thing, but rather related to html. When rendering text, white-space will always be condensed to one space, unless explicitly stated otherwise - eg by using or some other method.
Related
I'm currently developing a small Ionic 4 project for college that uses Google Firebase to save and store data, which will be used by the nursing course / class to make things easier for them when it comes to saving patients' data and test details.
In the page that shows all registered patients, I have an ion-searchbar which will be used to filter the patients by name and a ng-container with a *ngFor that pulls all registered patients from the database and puts them into ion-cards.
<ion-searchbar placeholder="Search..." expand="full" color="abwb" [(ngModel)]="searchQuery" (ionChange)="search()"></ion-searchbar>
<ng-container *ngFor="let patient of dBase">
<ion-card color="abwb">
<ion-card-header style="font-weight: bold">{{patient.name}}</ion-card-header>
<ion-card-content>
<ion-button [routerLink]="['/pat-prf', patient.id]" color="bwab">PROFILE<ion-icon name="person" slot="start"></ion-icon></ion-button>
<ion-button [routerLink]="['/pat-tst', patient.id]" color="bwab">TESTS<ion-icon name="list-box" slot="start"></ion-icon></ion-button>
</ion-card-content>
</ion-card>
</ng-container>
I managed to get the value from what's being typed into the search field to be displayed via a console.log() action, but I have no idea on how to make it actually go and search the database for the specified names OR to make the ng-container only show the cards with names that match.
I've been told I had to use a *ngIf to do such a thing, but I honestly got no idea how to use it properly for this kind of thing. Can anyone point me in the right direction?
You have two solutions, a Frontend solution and a Backend solution.
The Frontend solution
The frontend is to filter out the list that you have from the server. This is can use the Array.prototype.filter(). In order to make this work, the backend should return all the patients without pagination (Which can work for small list, but not preferred for big one).
// allPatients will contain all the results from the server and dBase will be filtered
private allPatients = [];
ngOnInit() {
this.httpClient.get(MY_API_TO_GET_PATIENTS)
.subscribe(response => this.allPatients = this.dBase = response )
}
search() {
this.dBase = allPatients.filter(item => item.name.includes(this.searchQuery));
}
The Backend solution
In this solution, we will send a request to the Backend that contains the search query. Then, the Backend will respond with the results that met the search query. Here we will need only to send a new request to the server each time the user enters a new value.
search() {
this.httpClient.get(MY_URL, {params: {searchQuery: this.searchQuery})
.subscribe(response => this.dBase = response )
}
So I have a Ion-select with 3 static values and I would like for the 2nd one to be selected and displayed by default, doesn't sound to difficult or much of a problem right? Well so I tried simply adding selected near the ion-select option (displayed in the code below) just like they did with the example on the official document, but that for some reason had absolutely no effect and it is still not being displayed when I reload the page. Any idea on what could be the problem here?
<ion-item>
<ion-label>{{ "HOME.row_text" | translate }}</ion-label>
<ion-select [(ngModel)]="drive_option" (ionChange)="updateResult()">
<ion-select-option value=0.5>{{ "HOME.row_half" | translate }}</ion-select-option>
<ion-select-option value=1 selected>{{ "HOME.row_simple" | translate }}</ion-select-option>
<ion-select-option value=2>{{ "HOME.row_double" | translate }}</ion-select-option>
</ion-select>
</ion-item>
The matching between the model value and the dom value is type sensitive.
Vanilla dom properties are always strings and won't match the numeric drive_option. Try:
<ion-select-option [value]="0.5">{{ "HOME.row_half" | translate }}</ion-select-option>
It's because selected doesn't mean anything when you are using ngModel.
You need to set drive_option = 1 in the code and it will be reflected in the UI.
You probably don't need that (ionChange) either as any change will automatically update the drive_option value.
It would be helpful for you to go through the Angular documentation to understand how things work.
It was confusing for me too at the start (and still is regularly) but Ionic is not just about using Ionic, you need to take some time to get a core understand of Angular as well.
The concept is though that you are not building a traditional form, you are building a data model, and then letting angular two way bind that data - which is what the [()] means.
I am using ion-range with pin and steps. I get the current value in the range pin, but I want to add/append some text next to it.
So far in ionic API and docs I did not find a way to modify the content from the range pin, so I am thinking on maybe appending a span via the code, but so far I know to use .append() function from jQuery.
The html of the range pin is:
<div class="range-pin" role="presentation">1</div>
So I want to show it like:
<div class="range-pin" role="presentation">1 item</div>
I know it is a bit late but if anyone comes across this question, I have found the following solution:
HTML
<ion-range id="euroRange" debounce="250" pin="true" min="0" max="50" (ionChange)="formDidUpdate()" [(ngModel)]="price" color="secondary"></ion-range>
See how I added an id called euroRange to my ion-range element.
CSS
#euroRange {
.range-pin:after {
content: " €";
}
}
Inside of the euroRage id I added .range-pin:after which means that whatever I specify should be done directly after the normal content of the pin.
With content I added a space and the € symbol.
Here is the
result.
This was my solution.
Note: I put this inside ionViewDidEnter.
this._elementRef.nativeElement
.querySelector('.range-knob-handle')
.addEventListener('pointermove', function () {
const value = this.getAttribute('aria-valuenow');
this.querySelector('.range-pin').textContent = `${value} hours`;
});
So the main thing here is that the const value is the value selected on the range. After that you can do whatever you want with it and just set the textContent of the range-pin to fix the text.
I'm trying to use the placement option listed under input options for the NgbInputDatePicker.
I'd like to change the default bottom-left position of the popup datepicker, but when I try to use placement in the plunker example (https://ng-bootstrap.github.io/app/components/datepicker/demos/popup/plnkr.html) It doesn't change the position of the popup.
I've tried:
adding [placement]="top" inside of the input tag:
<input class="form-control" placeholder="yyyy-mm-dd"
name="dp" [placement]="top" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
I've also tried just placing it in the parent div:
<div class="input-group" placement="top">
<input class="form-control" placeholder="yyyy-mm-dd"
name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
but neither seems to change the pop up position. I'm new to Angular, so perhaps I just have the syntax wrong somehow? I noticed other input APIs in the documentation that seemed to be used in this fashion so I thought it might work...
I'm using ng-bootstrap 1.0.0-beta.2, and Angular 4.3.4.
Thanks.
The problem is that you are using a binding to an expression (top means expression in [placement]="top") while I think that your intention is to use "top" constant. You can solve it using one of the 2 methods:
placement="top" (preferred)
[placement]="'top'" (notice additional quotes around top)
When specified properly the placement option works perfectly fine as illustrated in this plunker: http://plnkr.co/edit/NCNmpm3tlxapH4jZS08F?p=preview
I'm working on a site in EPiServer, and whenever I create a page property with the type set to "XHTML string" (which uses the WYSIWYG content editor in Edit mode), it wraps all content in <p> tags.
Is there any way to prevent this from happening? I can't remove the paragraph margins universally through my CSS (e.g. p {margin: 0 !important;}) since I do need the margins for actual paragraphs of text. I've even tried going to the HTML source view in the editor and manually deleting the <p> tags that it generates, but it immediately adds them back in when I save!
It doesn't happen when the property type is either a long or short string, but that's not always an option since the content might contain images, dynamic controls, etc.
This is becoming a real nuisance since it's very hard to achieve the layout I need when basically every element on the page has extra margins applied to it.
As Johan is saying, they are there for a reason - see more info here. That being said, it's not impossible to remove them. It can be done in one of two ways (taken from world.episerver.com:
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
myEditor.InitOptions["force_p_newlines"] = "false";
}
or
<script type="text/javascript">
tinyMCE.init({
force_p_newlines: false
});
</script>
You can add your own custom TinyMCE-config that removes P-elements or strip them out using regular expressions either when saving the page or when rendering the property/page.
I think it's a bad idea though. P-elements are what the editors generate the most and in most cases their content is also semantically correct. Better to wrap your property in a div with a class and adjust margins using CSS like you mention.
If you're using a version of EPiServer with TinyMCE editors, you can insert <br /> elements instead of <p> elements if you type shift-enter instead of enter. This should eliminate your margin problems.
More info at the link below:
http://www.tinymce.com/wiki.php/TinyMCE_FAQ#TinyMCE_produce_P_elements_on_enter.2Freturn_instead_of_BR_elements.3F
EDIT: My comment below answers his question better.
I discovered that while I can't remove the <p> tags from the source view (because it adds them back in automatically), if I replace them with <div> tags, it'll leave things alone. It does mean that I've got an extra <div> wrapping some elements that I don't really need, but at least a <div> doesn't add margins like a <p> does, so...good enough!