How do i give the showProduct:boolean = false; value to the app-product html selector so it will be false at start?
showProduct:boolean = false;
<button (click)="showProduct=!showProduct">Show Product</button>
<div *ngIf="!showProduct">
<app-product></app-product>
</div>
I think you need <div *ngIf="showProduct">,
<button (click)="showProduct=!showProduct">Show Product</button>
<div *ngIf="showProduct">
<app-product></app-product>
</div>
Related
I have a vue select component, according to selection I want to change content, and show the loading screen on change event.
<template>
<div>
<div class="row component-separation audit-select">
<div class="col-md-4 pull-right">
<v-select
id="auditModeSelect"
:options="auditOptions"
label="label"
placeholder="Change Audit View Type"
class="form-control border-bottom"
v-model="auditOption"
#input="changeViewMode"
:clearable="false">
</v-select>
</div>
</div>
{{loadingTheContent}}
<div v-if="loadingTheContent">
<loading/>
</div>
<div v-else>
....
</div>
</div>
</template>
changeViewMode(selectedMode) {
this.loadingTheContent = true;
if (selectedMode && selectedMode.value === 1) {
...
} else {
...
}
this.loadingTheContent = false;
},
But loadingTheContent variable value is always false, not changing.
I also tried with adding custom button to trigger but same thing exists
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
HTML Body, Ty For help me.
<div class="bottoms_list">
<div class="One cell">
<button class="active"><span><i class="Picture"></i></span>1</button>
</div>
<div class="Two cell">
<button class=""><span><i class="Picture"></i></span>2</button>
</div>
<div class="three cell">
<button class=""><span><i class="Picture"></i></span>3</button>
</div>
<div class="four cell">
<button class=""><span><i class="Picture"></i></span>4</button>
</div>
</div>
Here button (1) is active.
Let's say I want to activate button (2).
I tried:
Dim spanpic As String = ""
For Each choice As HtmlElement In Form1.WebBrowser1.Document.GetElementsByTagName("div")
If choice.GetAttribute("className").Contains("bottoms_list") AndAlso choice.Id.StartsWith("2") Then
spanpic = choice.Id
For Each elm As HtmlElement In choice.Document.GetElementsByTagName("button")
If elm.GetAttribute("className") = "button" Then
elm.InvokeMember("click")
Exit For
End If
Next
End If
Next
'''''''''''''''''
Threading.Thread.Sleep(100)
Try
For Each elm As HtmlElement In
Form1.WebBrowser1.Document.GetElementById(spanpic).Document.GetElementsByTagName("button")
If elm.GetAttribute("className") = "bottoms_list" Then
If elm.GetAttribute("disabled") = "disabled" Then
Else
Exit For
End If
End If
Next
Catch
End Try
That's all I know, and I don't have good experience with element ids......................................
Try this :
"get collection of all div in the webpage"
For Each divSect As HtmlElement In WebBrowser1.Document.GetElementsByTagName("div")
"get the div which has the tag of Two Cell"
If divSect.OuterHtml.Contains("Two Cell") then
"get the button inside the div which has the tag of Two Cell"
For Each elem as HtmlElement In divSect.children
If elem.GetAttribute("className") = "button" Then
elem.InvokeMember("click")
End if
Next
End if
Next
I hope those code could solve your problem.
look I'm not an expert either, but if you want to set a class "active" to the pressed button, then you should use class binding techniques in most of java-script frameworks.
For me I use VueJs and here's how I would do it:
HTML Body:
<div id="myList">
<div class="bottoms_list">
<div class="One cell">
<button #click="isActive = 1" :class="{active: isActive == 1}"><span><i class="Picture"></i></span>1</button>
</div>
<div class="Two cell">
<button #click="isActive = 2" :class="{active: isActive == 2}"><span><i class="Picture"></i></span>2</button>
</div>
<div class="three cell">
<button #click="isActive = 3" :class="{active: isActive == 3}"><span><i class="Picture"></i></span>3</button>
</div>
<div class="four cell">
<button #click="isActive = 4" :class="{active: isActive == 4}"><span><i class="Picture"></i></span>4</button>
</div>
</div>
</div>
then your Vue instance should look like this :
new Vue({
el: '#myList',
data: {
isActive: 0,
},
});
You can optimize this code to one line using the v-for directive.
For example I have this component with a simple template:
<div>
<h2>Hello!!!</h2>
</div>
and I want to add this new template tag:
<div>
<h2>Hello!!!</h2>
<div class = "new-tag">
</div>
</div>
How can I do this?
Thanks.
Use a structural directive like *ngIf
<div>
<h2>Hello!!!</h2>
<div *ngIf="showNew" class = "new-tag"></div>
<button (click)="showNew = true">click me</button>
</div>
This is what i'm trying to achieve.
section1 will be hidden at page load. When user clicks on Advanced, section1 should show & section2 should hide. On clicking Basic, the opposite should happen. Nothing happens when I click any of the anchor tags now. Where am i going wrong.
<div class="container" ng-init="advstatus=true">
Basic
<br/>
Advanced
<div class="section1" ng-hide="advstatus">
///...
</div>
<section ng-show="advstatus" class="section2">
///...
</section>
</div>
In AngularJS you need to use ng-click instead of onclick.
Also, ng-init isn't supposed to be used unless you're in ng-repeat, which you are not (take a look at the Docs).
You should set up the variable in your controller:
<div ng-app ng-controller="myCtrl" class="container" >
Basic
<br/>
Advanced
<div class="section1" ng-show="!advstatus">
Section 1
</div>
<section ng-show="advstatus" class="section2">
Section 2
</section>
</div>
Controller:
function myCtrl($scope) {
$scope.advstatus = true;
}
JS Fiddle
This one is easy to understand
<div class="section1" ng-show="state1">
Section 1
</div>
<div class="section2" ng-show="state2">
Section 2
</div>
<input type="button" value="Advance" ng-click="sec1_show()" />
<input type="button" value="Basic" ng-click="sec2_show()" />
<script>
function homecntrl($scope) {
$scope.state1 = false;
$scope.state2 = true;
$scope.sec1_show = function () {
$scope.state1 = true;
$scope.state2 = false;
};
$scope.sec2_show = function () {
$scope.state2 = true;
$scope.state1 = false
};
};
</script>
Very simple just do this:
<button ng-click="hideShow=(hideShow ? false : true)">Toggle</button>
<div ng-if="hideShow">hide and show content ...</div>