I'm writing a todolist demo.I try to double click to edit the item ,but it has no effect and no error.
the code as below
<li *ngFor="let todo of todos; let i = index;"
[ngClass]="{
completed: todo.isDone,
editing: currentEditing === todo
}"
>
<div class="view">
<input class="toggle" type="checkbox" [(ngModel)]="todo.isDone" >
<label (dblclick)="currentEditing = todo"> {{ todo.title }}</label>
<button class="destroy" (click)="delete(i)"> </button>
</div>
<input class="edit" value="Create a TodoMVC template">
</li>
but when i use (click),the item can editing.
<label (click)="currentEditing = todo"> {{ todo.title }}</label>
Can anyone see what I'm doing wrong? thanks!
Hi here is a link given below where dblclick work properly both for button and label on stackblitz. However, it works in different way as you have tried already. Please check: https://stackblitz.com/edit/angular-double-click-bndehs?file=src%2Fapp%2Fapp.component.html
Note: Please Check DoubleClickDirective class inside double-click.directive.ts file and #HostListener
Related
I'm trying to do an reactive form but I have some problem with the visual part ^^
Here is my html :
<form class="text-center" [formGroup]="requeteModif" (ngSubmit)="modifier()" *ngIf="tableSelect != null">
<h5>Ajouter des informations</h5>
<div class="row">
<div class="col" *ngFor="let modification of modif.controls; let nomCol of nomColonne; let j=index" formArrayName="modif">
<label class="text-center">
{{nomCol}}
</label>
<div *ngFor="let infoTable of infoTable; let i = index;">
<input type="text" class="form-control" [formControlName]="i">
</div>
<div><button class="btn btn-primary" type="submit">Modifier</button></div>
</div>
</div>
</form>
What I want :
Col1 Col2
true A Button (get true, A)
false B Button
[EDIT]
I have find a way to display it the way I want but I don't know how to arrange my code since I'm suppose to use variable..
<div *ngFor="let infoTable of infoTable; let i = index;">
<input *ngIf="j==0" type="text" class="form-control" [formControlName]="i">
<input *ngIf="j==1" type="text" class="form-control" [formControlName]="i+5">
</div>
j id the number of the columns, as you can see it's depend on the number of columns, using this way it's too static but I have no idea about how to fix it...
Sorry for my english
Thank you !
I have find the answer, I just have use the data_binding but I didn't knew how it works ^^' [ngModel]
for getCities(), i am fetching data from api,
which i just showed in li tag, i am in deliama how to submit the check box value,
when customer will check for multiple cities
<form #hlForm="ngForm" (ngSubmit)="filterData(hlForm)">
<span>
<button type="submit" class="btn-blue" (click)="getCities()">Select City</button>
<ul class="location-filter" *ngIf="cityList">
<li *ngFor="let city of cityList">
{{city}} <input type="checkbox" name="selectCity">
</li>
</ul>
</span>
<button type="submit" value="submit">submit</button>
</form>
When using template driven forms, add NgModel to the element attributes.
You should also add a unique name to each li element to be able to differentiate between values:
<li *ngFor="let city of cityList">
{{city.name}} <input type="checkbox" [name]="city.name" ngModel>
</li>
Stackblitz demo
You need to have an array where you can store all your selected cities, and update this array each time a checkbox for a city is checked/unchecked.
Change your code to:
<form #hlForm="ngForm" (ngSubmit)="filterData(hlForm)">
<span>
<button type="submit" class="btn-blue" (click)="getCities()">Select City</button>
<ul class="location-filter" *ngIf="cityList">
<li *ngFor="let city of cityList">
{{city}} <input value={{city}} (change)="onCheckChange($event)" type="checkbox" name="selectCity">
</li>
</ul>
</span>
<button type="submit" value="submit">submit</button>
</form>
And your onCheckChange method would look like this:
onCheckChange(event: any)
{
console.log(event.target.value)
if (event.target.checked)
{
this.selectedCities.push(event.target.value);
}
else
{
this.selectedCities = this.selectedCities.filter(x => x !== event.target.value);
}
}
Take a look at this Stackblitz illustrating this.
You can reference DOM element by using the # selector and viewchild.
In your .ts you can get the element like this:
#ViewChild('yourSelector') anyName: Input
and then call any function that exists on the element. and in your .html you use the # selector:
<input #yourSelector type="checkbox"....
Error image:
<div fxFlex.gt-lg="100" fxFlex="100" *ngIf="requestAction == 'add'">
<div class="pb-1">
<md2-select placeholder="{{'WidgetType'|translate:lang}}" class="input_custom_width"(change)="widgetNode($event.value)" required>
<md2-option *ngFor="let widgetType of widgetTypeAry" [value]="widgetType.value">
{{widgetType.name}}
</md2-option>
</md2-select>
</div>
</div>
<div fxFlex.gt-lg="100" fxFlex="100" *ngIf="fieldsObj['node'] && showRequestAction" >
<div class="pb-1">
<md2-select placeholder="{{'Node'|translate:lang}}" [formControl]="editWidgetForm.controls['nodeId']" [(ngModel)]="nodeId" class="input_custom_width" [(multiple)]="isMultiNode" (change)="nodeChange($event.value)" required>
<md2-select-header>
<md-input-container class="input_custom_width">
<input mdInput type="text" placeholder="{{'Search'| translate:lang}}" [ngModelOptions]="{standalone: true}" [(ngModel)]="searchNode"/>
</md-input-container>
</md2-select-header>
<md2-option *ngFor="let node of nodesAry | filterPipe : searchNode" [value]="node.value">
{{ node.name }}
</md2-option>
</md2-select>
<small *ngIf="editWidgetForm.controls['nodeId'].hasError('required') && editWidgetForm.controls['nodeId'].touched" class="mat-text-warn">{{'nodeReq'|translate:lang}}</small>
</div>
</div>
When I use multiple in select dropdown it works fine but when I use [multiple] it only works in my edit form but not in add form .and it gives above error-Error: Cannot change multiple mode of select after initialization.help me to sort out this.
There is a very ugly workaround for this problem, warp your mat-select in a *ngif=true, and create a duplicate with the multiple property, wrapped in a *ngif=!true just beneath it
I'm making a project in angular. When i click on the checkbox i want that there is a line trough the text. But when i click on the checkbox nothing happens ..
Can you help me ?
Thanks !
<h3>Todos list</h3>
<ul class="list-group">
<li *ngFor="let todo of todos; let i = index" class="list-group-item">
{{todo.text}}
<p [ngClass]="{strike: deleted}">test</p>
<label>
<input type="checkbox" ng-model="deleted">
</label>
<button class="btn btn-danger btn-small" (click)="deleteTodo(i)">X</button>
</li>
</ul>
At first, in Angular it's [(ngModel)], not ng-model as in AngularJs.
Also, you can't have a single variable (deleted) to handle all items in your *ngFor.
To make it wok apply the changes:
...
<p [ngClass]="{strike: todo.deleted}">test</p>
<label>
<input type="checkbox"
[(ngModel)]="todo.deleted">
</label>
...
DEMO
use <s> tag instead of <strike> tag
Ex:
if you want <strike> Not Aailable </strike>
and it is not supported by angular 4 and above versions then,
use <s>Not Available</s>
Im experimenting with template elements and Angular.
<template id="loginTemplate">
<div id="login" class="menuTop menu top" data-ng-controller="loginCtrl">
<form class="form-inline text-center" id="loginForm" data-ng-submit="login()">
<input type="email" class="input-big" placeholder="Email" data-ng-model="loginEmail">
<input type="password" class="input-mini" placeholder="Password" data-ng-model="loginPass">
<input type="text" class="input-small" placeholder="Display name" data-ng-model="loginName" data-ng-show="register">
<button type="submit" class="btn-small">Sign in</button>
<button type="button" class="btn-small" data-ng-hide="register" data-ng-click="register=true">Register</button>
</form>
</div>
</template>
JS:
(function init(){
"use strict";
var loginTemplate = document.querySelector("#loginTemplate").content;
document.body.appendChild(loginTemplate.cloneNode(true));
return;
})();
This works great in rendering my Angular controller data on init.
However when I want to conditionally load the next template it doesn't work.
<template id="menuTemplate">
<div id="menu" class="menuTop menu top" data-ng-controller="menuCtrl">
{{ time.now }}
</div>
</template>
JS:
socket.on("logon", function ( data ){
//this fails
$scope.user.name = data.userName;
var menuTemplate = document.querySelector("#menuTemplate").content;
document.body.removeChild(document.getElementById("login"));
document.body.appendChild(menuTemplate.cloneNode(true));
}
This will show me the {{ variables }}.
Loading this menuTemplate first makes it work, but loading it conditionally doesn't.
Maybe Angular doesn't support template-elements, as they have said support will be available in 2.0, but initial load works so maybe someone has it working elsewhere?
Maybe the .clonenode breaks the angular link when performed after load? I dont know.
edit:Have a fiddle but have been unable to make it work as it does in chrome canary.
http://jsfiddle.net/CSK8n/