I have used [ngClass] in the past, applying classes depending on the Boolean value of a variable held in the javascript/typescript before. However I am wondering if it is possible to apply it based on a local HTML boolean value or not?
ie.
<div class="card" *ngFor="let item of data" #panel ngClass="{expanded: isExpanded}">
<div class="header">
<div class="itemName">Text</div>
<div class="itemDir">Some more text</div>
<mat-icon *ngIf="!panel.isExpanded" (click)="panel.isExpanded=true">edit</mat-icon>
<mat-icon *ngIf="panel.isExpanded" (click)="panel.isExpanded=false">cancel</mat-icon>
</div>
</div>
Here, I am displaying one of two icons, depending on the local isExpanded variable defined within the HTML and not the backend.
I am wanting to apply a class based on this value... is it possible?
Here is what I am working on
use like [class.expanded]="isExpanded". binding to class.expanded trumps the class attribute
<div class="card" *ngFor="let item of data" #panel [class.expanded]="panel.isExpanded" [class.notExpanded]="!panel.isExpanded">
you can use *ngIf="true as isExpanded" to make variable on the template
<div class="card" *ngFor="let item of [1,2,3,4];" >
<div class="header" *ngIf="true as isExpanded" ngClass="{expanded: !isExpanded}">
<div class="itemName">Text</div>
<div class="itemDir">Some more text</div>
<div *ngIf="isExpanded" (click)="isExpanded=!isExpanded">edit</div>
<div *ngIf="!isExpanded" (click)="isExpanded=!isExpanded">cancel</div>
</div>
</div>
stackblitz demo 👍👍
<div class="card" *ngFor="let item of data" #panel ngClass="{expanded: isExpanded}">
<div class="header">
<div class="itemName">{{item.name}}</div>
<div class="itemDir">{{item.directory}}</div>
<mat-icon *ngIf="!isExpanded;else other_content" (click)="isExpanded=true">edit</mat-icon>
<ng-template #other_content>Other Icon goes here</ng-template>
</div>
You can refer the above code which use If and else by template referenced variable which properly toggle between both icon and non Icon
Related
I am using the follwing code to display some values from the array
<div class="row">
<div class="column" *ngFor="let card of cards; let i=index">
<div class="card">
<h3>Card {{card.id}}</h3>
<p>{{card.text}}</p>
</div>
</div>
</div>
But I would like to set the first one is a button with given hard code text. It shouldn't from the array.
I think that probably using ngClass to compare when the index is 0. But not sure how?
Angular has the first and last variables out of the box.
I can't clearly understand what you are asking, but I think you want to show a button only on the first? You can also target the last like below.
<div class="row">
<div class="column" *ngFor="let card of cards; let i=index let first = first; let last = last">
<div class="card">
<h3>Card {{card.id}}</h3>
<p>{{card.text}}</p>
<ng-container *ngIf="first"><button>first item only</button></ng-container>
<ng-container *ngIf="last"><button>last item only</button></ng-container>
</div>
</div>
</div>
You might try something like this:
<div class="row">
<div class="column" *ngFor="let card of cards; let i=index">
<div
class="card"
(click)="((i === 0) || (i === cards.length)) && yourClickEvent($event)"
>
<h3>Card {{ (i === 0) ? 'Your Hard code ID' : card.id }}</h3>
<p>{{card.text}}</p>
</div>
</div>
</div>
The condition in the click event above, will check if its either the first or last card and then implement your click functionality.. so is the case with the ID
Is this what you are trying to achieve?
I'm working with PrimeNg picklist and here is what i have:
The focus is on the first row, don't mind the other rows not having the radio button (it's uncompleted testdata).
What i'm trying to achieve is that when you click on the first option 'Good:Stock', the little dropdown to the right with A1 appears. When you select 'Bad', it disappears.
The problem now is that when i select 'Good' for one item, the dropdown will appear for every record in the loop.
I want it to appear only for the item where i selected the radiobutton.
All help is welcome! Ask away if you need more code but i don't think the .ts file matters for now.
Here is what the code looks like:
<label for="productGroup">Select product</label>
<div class="form-group" id="productGroup">
<div class="row">
<div class="col">
<p-pickList [source]="products"
(onMoveToTarget)="onMoveToTarget()"
[target]="selectedProducts" sourceHeader="Available" targetHeader="Selected"
[responsive]="true" filterBy="description,productNumber"
dragdrop="true" dragdropScope="products" [showTargetControls]="false" [showSourceControls]="false"
sourceFilterPlaceholder="Search product in Available"
targetFilterPlaceholder="Search product in Selected"
[sourceStyle]="{'height':'33vh'}" [targetStyle]="{'height':'33vh'}">
<ng-template let-product pTemplate="item">
<div id="product" class="row ui-helper-clearfix">
<div class="col-1 padding-0 brighten">
<img (mouseover)="getProductImage(product)"
[escape]="false"
pTooltip='<img style="max-height: 100%; max-width: 100%" src="{{base64String}}">'
tooltipPosition="right"
src="assets/eye-icon.png" style="max-width: 100%; width: 80%;">
</div>
<div class="col-4">
<div class="row">{{product.description}}</div>
<br>
<div class="row">{{product.productNumber}}</div>
</div>
<div class="col-4" *ngIf="inbound && product.goodLabel && product.badLabelInWarranty &&!hqAdmin&&!carStock">
<div class="row">
<p-radioButton (onClick)="toggleProjects(true, product.id)" name="{{product.productNumber}}"
label="Good: {{product.goodLabel.name}}"
[value]="product.goodLabel" [(ngModel)]="product.quality">
</p-radioButton>
<p-radioButton name="{{product.productNumber}}"
label="Bad: {{product.badLabelInWarranty.name}}/{{product.badLabelOutOfWarranty.name}}"
[value]="product.badLabelInWarranty" [(ngModel)]="product.quality"
(onClick)="toggleProjects(false, product.id)">
</p-radioButton>
</div>
</div>
<div class="col-2 nopadding" *ngIf="goodSelected">
<p-dropdown id="dropdownInput"
[autoWidth]="false"
[options]="projectLabelSelectItems">
</p-dropdown>
</div>
</ng-template>
</p-pickList>
</div>
</div>
</div>
What is happening in you case suppose lets take an example you have 10 rows and your are maintaining one single variable for all row so what happen when the value of that flag become true or false drop-down from all the rows will show or hide.
So what is suggest in the collection take one property extra for this drop-down column.
<div class="col-2 nopadding" *ngIf="goodSelected">
<p-dropdown id="dropdownInput"
[autoWidth]="false"
[options]="projectLabelSelectItems">
</p-dropdown>
</div>
Here goodSelected is single variable insted of add one vriable in property
<div class="col-2 nopadding" *ngIf="product.goodSelected">
<p-dropdown id="dropdownInput"
[autoWidth]="false"
[options]="projectLabelSelectItems">
</p-dropdown>
</div>
And on toggle make goodSelected selected value true or false of selected row only.
I have component template with multiple ng-content elements:
<div class="form__general">
<ng-content select="[general]"></ng-content>
</div>
<div class="form__footer">
<ng-content select="[footer]"></ng-content>
</div>
How can I check inside *ngIf condition is #footer is provided?
I tried something like this, but this does not work:
<div *ngIf="#footer" class="form__footer">
<ng-content select="[footer]"></ng-content>
</div>
Remove # from the condition check.
Sample Code Snippet:
app.component.html
<h1 #footer>Welcome</h1>
<child-comp>
<div *ngIf="footer.innerText === 'Welcome'" class="form__footer">
Hi There
</div>
</child-comp>
child.component.html
<ng-content select=".form__footer"></ng-content>
I have duplicate code in my HTML. When I have it in Java i mark the code in IntelliJ and select "extract method" => "replace 2 occurrences".
I want to do the same for HTML and have the following solution, but I think its ugly:
<ng-template #banner1>
stuff...
</ng-template>
<ng-template #banner2>
other stuff...
</ng-template>
<div class="row tight">
<div class="col-sm-6 hidden-print">
<ng-container *ngIf="false; else banner1"></ng-container>
</div>
<div class="col-sm-6 hidden-print">
<div class="col-sm-7">
<ng-container *ngIf="false; else banner2"></ng-container>
</div>
<div class="col-sm-5">
stuff3...
</div>
</div>
<div class="col-sm-8 visible-print">
<ng-container *ngIf="false; else banner1"></ng-container>
</div>
<div class="col-sm-4 visible-print">
<ng-container *ngIf="false; else banner2"></ng-container>
</div>
</div>
The code above WORKS (if I have copy/paste it correctly) but it needs improvement...
The whole reason for the duplicated code is that I want different styling for the code when printing on paper and then viewing on screen.
I don't like this part:
<ng-container *ngIf="false; else banner1"></ng-container>
I want something like
<ng-inject template="banner1"></ng-inject>
or something even better.
There's ngTemplateOutlet directive that can help you with this. The syntax is very simple - <ng-container *ngTemplateOutlet="yourTemplate"></ng-container>
Example - https://stackblitz.com/edit/angular-xh9ebz
You can use property bindings concept something like
TS Side
htmlOfStuff = "<h1>HTML CODE</h1>";
HTML side
<div [innerHtml]="htmlOfStuff"></div>
So though my question might sound familiar the case is a bit different. I have a screen with multiple tasks. To show the tasks I am iterating via the data and my code looks something like
<div *ngFor="let task of tasks" class="scheduleContainer inline-block shadow">
<div id="myHeader" #myHeader class="activeHeader">
{{task.title}}
</div>
<div class="detailsBox">
<div class="row">
<div class="offset-md-1 col-md-auto">
Last Date:
</div>
<div class="col-md-auto">
{{task.lastDate}}
</div>
</div>
<div class="row">
<div class="offset-md-1 col-md-auto">
Duration:
</div>
<div class="col-md-auto">
{{task.duration}}
</div>
</div>
<div class="row">
<div class="offset-md-1 col-md-auto">
Total Runs:
</div>
<div class="col-md-auto">
{{task.totalRun}}
</div>
</div>
</div>
<div class="footer">
<a [routerLink]="['edit-scheduled-tasks']">edit schedule</a>
<a [routerLink]="['view-history-scheduled-tasks']">view history</a>
<a (click)="onClick()">enable task</a>
run now
</div>
</div>
<router-outlet></router-outlet>
Now when I click on the enabled task, I would like the color of that particular div to be changed. In my component, I tried something like
onClick() {
this.myHeader.nativeElement.style.background = 'red';
}
So this did change the color but it did not change the current task but rather some other task. Suggestions?
you can access myHeader from template so you can change the color something like this
<div id="myHeader" #myHeader class="activeHeader">
Change the color by myHeader variable
</div>
<button (click)="myHeader.style.background='red'">click</button>
or you can use a property with ngStyle like this
<div [ngStyle]="{'background-color':color}" >
Another way by ngStyle
</div>
<button (click)="color='red'">click</button>
or you can use a property to toggle class with ngClass
<div [ngClass]="{'red':isClicked}" >
Set class
</div>
<button (click)="isClicked=!isClicked">Toggle class</button>
Example toggle color of taskList by useing ngClass
template
<div *ngFor="let task of taskList"
[ngClass]="{'red':selectedTasks[task.id]}"
(click)="selectedTasks[task.id]= !selectedTasks[task.id]" class="task">
{{task.name}}
</div>
or you can use button to toggle the state
<div *ngFor="let task of taskList"
[ngClass]="{'red':selectedTasks[task.id]}"
class="task">
{{task.name}}
<button (click)="selectedTasks[task.id]= !selectedTasks[task.id]">toggle {{task.name}}</button>
</div>
if you want to set the state without toggle on click event just set
the state to true like this selectedTasks[task.id] =true
component
taskList =[
{id:1 , name:'Task 01'},
{id:2 , name:'Task 02'},
{id:3 , name:'Task 03'},
{id:4 , name:'Task 04'},
{id:5 , name:'Task 05'},
];
selectedTasks = {};
stackblitz demo
Not a clean way to do, but it still works. Send an index of selected element to onClick(i) and add the color to selected div. So that you don't mess with template reference.
html
<div *ngFor="let task of tasks; let i=index;" class="scheduleContainer inline-block shadow">
<div id="myHeader" #myHeader class="activeHeader">
{{task}}
</div>
<div class="footer">
<a (click)="onClick(i)">enable task</a>
</div>
</div>
component.ts
onClick(index: number) {
document.querySelectorAll('#myHeader')[index]
.style.background = 'red';
}
DEMO
It's not a good practice to manipulate DOM directly.
Angular: Stop manipulating DOM with ElementRef!
As an alternate, It's easy to bind inline style in your Angular templates using style binding.
Since you would like the color of that particular div to be changed. Use A boolean array:
component:
export class AppComponent {
name = 'Angular';
public styleArray=new Array<boolean>(10);
onClick(i)
{
this.styleArray[i]=true;
}
}
While Iterating pass index to onClick(i) to set particular index of array true and apply style dynamically
[style.color]="styleArray[i] ? 'green':'black'"
<div *ngFor="let task of tasks; let i=index" class="scheduleContainer inline-block shadow">
<div id="myHeader" [style.color]="styleArray[i] ? 'green':'black'" class="activeHeader">
{{task.title}}
</div>
........rest of the code
<a (click)="onClick(i)">enable task</a>
Live Demo