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.
Related
I am able to to implement drag and drop functionality using ng2-dragula but the problem I am facing that it drags the header row as well and also unable to get the dragged row values(its row data )and the row above and below from the dragged row.
Can anyone help me this ?
I also found the same issue on github
https://github.com/valor-software/ng2-dragula/issues/831
<mat-table [dataSource]="dataSource"
matSort matSortActive="categoryName" matSortDirection="asc" matSortDisableClear
[dragula]='"seventh-bag"'>
<ng-container matColumnDef="seqNo">
<mat-header-cell *matHeaderCellDef>S.No.</mat-header-cell>
<mat-cell *matCellDef="let row;let i=index;">
{{(paginator.pageSize * (paginator.pageIndex)) + i+1}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header (mouseenter)="nameIcon=false" (mouseleave)="nameIcon=true">
Category Name
<i *ngIf="nameIcon && sort.active=='join'" class="fa fa-sort"></i>
</mat-header-cell>
<mat-cell
*matCellDef="let catg;">
name
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"
(click)="selectedRow(row)" [ngClass]="{'highlight': selectedRowIndex == row._id}"
(mouseenter) ="dragRow = row" (mouseleave) ="mouseLeave('div A')"
>
{{row}}
</mat-row>
</mat-table>
When I use the above approach, then I am unable to fetch the dragged row data and its new position
2.) When I implement ng2-dragula
<mat-row *matRowDef="let row; columns: displayedColumns"
(click)="selectedRow(row)" [dragula]='"seventh-bag"'
>
then the drag and drop functionality not works well
Please refer to the picture below
Image Source:- https://user-images.githubusercontent.com/6483007/36256531-4a34b638-124b-11e8-9b13-cd15391886ae.gif
This may not be an exact answer to your question regarding dragula but seeing no-one has had a go yet here is a possible solution that seems to be working for me: I tried getting drag and drop working with mat-table as well. I didn't use ng2-dragula (i used jquery ui-sortable in the past), but i did get somewhere with angulars new CDK drag and drop system. (now in 7.0.0).
https://material.angular.io/cdk/drag-drop/overview
The only issue i had with this is that if you are wanting to do sorting, the cdkDropList directive had to be a direct parent to the cdkDrag elements, not sure if there is a way around this and i couldn't find an option saying otherwise.
seeing that mat-tables don't seem to be constructed in a way that works nicely with d&d I've turned to lists or expansion-panels (if you want the drop down for extended forms on each row) as they seem to behave better when being nested and work well with the drag and drop tools by cdk. (you will probably need to do some custom styling to get it looking like a table)
I realise it wont come with the sorting, filtering features mat-table comes with but if you are prioritising the d&d you may have to find another way around it.
Hope that gives you something to work with!
I am using ion-datetime for my project
https://ionicframework.com/docs/api/components/datetime/DateTime/
It is working nice, only problem i have to show inital value, that does not show??
<ion-datetime displayFormat="YYYY" name="LastServiceDate" value="2017"></ion-datetime>
I put value inside attibute it does not show inital?
There is no value property in ion-datetime in documentation, try ngModel.
<ion-datetime displayFormat="YYYY" name="LastServiceDate" [(ngModel)]="dateValueVar">
</ion-datetime>
<mat-form-field>
<mat-select [formControl]="form.controls['defaultCategory']" [(ngModel)]="resource.categoryName" >
<mat-option *ngFor="let category of categories | async" [value]="category._id" >
{{ category.name }}
</mat-option>
</mat-select>
</mat-form-field>
I tried many things. The docs, some bug-reports on github still not solve my Problem.
I only want do preset a default value...
The default value is stored a variable named: resource.categoryName. The options comes from a collection from mongodb and these are stored in categories[].
This picture shows the closed mat-select (no default value shown, but it should...)
opened mat-select
Here is my .ts. The important line is "this.resource.categoryName = this.subdoc['name'];". There i set the "resource.categoryName. If i try to console.log(this.resource.categoryName), then i get the name of the category...
Creating a variable in the .ts and be sure its a string. After that declare the variable with the ID of the default Category. (in my case it only worked with the ID, not with the simple name) - Thanks to Simeon, Hamid and other Threads about this problem.
I can't see your component file but the problem might be that your resource.categoryName doesn't have a value set on initialization of the component. Try setting it manually in your *.component.ts file.
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
So my current situation is that I am trying to click on a marker based in a Google Maps window on a webpage. I have successfully located the markers in two manners: element.all(by.css('.angular-google-map-marker')) and element.all(by.repeater('m in map.markers')).
I have proven that I am obtaining the correct elements by changing the location on the Google Map and using count() to retrieve the number of markers present which returns the correct number in every case.
However, when I try to do for example element.all(by.css('.angular-google-map-marker')).first().click(), I receive the following error:
Failed: element not visible
HTML section
<div ng-transclude="" style="display: none">
<span class="angular-google-map-marker" ng-transclude="" ng-repeat="m in map.markers" options="m.options" coords="m.coords" idkey="m.id" click="onMarkerClick"></span>
<span class="angular-google-maps-window" ng-transclude="" coords="activeMarker.coords" options="windowMapOptions" show="windowMapOptions.show" closeclick="closeInfoWindow" templateurl="'gMapInfoWindow.html'" templateparameter="activeMarker"></span>
</div>
Normally elements that trigger some event due to clicking have an attribute like ng-click= foo(), however the markers above only use click= foo(). In addition if you look the line with the div tag, it says display: none, which might explain the visibility error.
My Question: Is there a way to activate the effect of an attribute like click= foo() without clicking on the element directly?
Aside from trying to make an element visible and then clicking, you can attempt clicking "via JavaScript" (there are some differences though - WebDriver click() vs JavaScript click()):
var marker = $('.angular-google-map-marker');
browser.executeScript("arguments[0].click();", marker.getWebElement());
First of all be sure that you can interact with the element when it is visible, you can do this from within the DevTools of your browser, make it visible by adding a display:block. Then check that if you change the value of the selectbox, the value can also be used with Angular Binding.
If so, you can easily make the element visible with Protractor by injecting a piece of Javascript in the page with the following command:
browser.executeScript('document.querySelector("div").style.display = "block"');
This results in a promise, so be aware of that!