Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I am trying to get rid of my header and footer components in just one specific component and don't know how to go about it. I am treating the app component as the index.html component. When I create a new component, these are always there and I need to figure out how to make it so my new component is blank.
You can watch router events in Angular and execute something based on the route.
Example:
You can implement this in your app component.
ngOnInit() {
this.router.events.forEach((event: NavigationEnd) => { // fires on each route change
if (event instanceof NavigationEnd) {
this.routeParam = event.url; // routeParam is a variable.
}
if (this.routeParam === '/') {
// do something
} else if (this.routeParam === '/login') {
// do something
// you can store a boolean in a service and use it to hide components.
this.someService.myBoolean = true;
} else {
// do something
}
})
}
In the UI you can use that boolean.
<myComponent *ngIf="!someService.myBoolean"><!-- someService should be
public -->
<!-- component you want to hide -->
</myComponent>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 days ago.
Improve this question
I am switching from class component to function component.
Now I have a question, I just want to have the method which return valuable in component. such as
const ImagePreview = (props) =>{
const onClick= (e) =>{
　　　　if (isVariableTrue(myvar)){
}
}
function isVariableTrue(b){ // I want to call this from onClick
if(b){ return true; }
else { return false;}
}
return (<div>mytest<br/></div>);
}
Howver of course this is not correct.
What is equivalent for this purpose?
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I don't seem to find quite exactly what I am looking for despite many research. I'm building a real estate react app, in the search page I want to be able to filter result based on price range, bedroom count, bathroom count, house type. I went over some tutorial, but I'm not quite sure if they point me in the right direction. I want to use functional component, react hooks, no redux or MobX and no css framework. Is it a necessity to use a </form> tag? How can we dynamically apply multiple filter on an array? Because the filter will work on local data that has been downloaded from an api stored in an array. I would like as much as explanation as possible please. Here's an example:
You are getting data from API and supplying it to you component. Now, this filter component has a local copy of the data, which will be used to filter. I can't comment on how you will create filters in your component (from UI point of view). I can suggest to use lodash library to apply various filters at once on an array of objects. One of the examples I can think of is -
var location = 'Miami, FL'
var priceFrom = $2000;
var priceTo = $3000;
var filterFunctions = _.overEvery([locationFilter, priceFilter]);
locationFilter(data) {
return data.filter(o => o.location === location);
}
priceFilter(data) {
return data.filter(o => o.price >= priceFrom && o.price <= priceTo);
}
var result = yourData.filter(filterFunctions);
To check the status of what filters are selected by user, you need to maintain it in local state of component. I guess, the best way to declare it as an object array. Push the filter and it's value when changed/selected by user. Remove it from array if user un-select it back. For example if user selects something from location drop down, push the value in the array, if not already there. Update the value otherwise based on name. The array should look this below (assuming react component):
this.state.filters = [{name: 'price', value: 2000},
{name: 'location', value: 'Miami, FL'}];
Now use this array to decide what filter functions you want to apply:
locationFilter(location) {
return this.state.yourData.filter(o => o.location === location);
}
var result;
filters.map(f => {
switch(f.name) {
case 'location':
result = locationFilter(f.value);
break;
case 'price':
result = priceFilter(f.value);
break;
}
// result contains filtered result
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I have written HTML code inside a JSON object as a string, is there a way in which i can access the HTML id from there.
{
"text":"<ol><li id='it_1'>Item1</li><li id='it_2'>Item2</li><li id='it_3'>Item3</li></ol>"
}
I want that whenever user is clicking any link in the inner list, i should get the id of it. In this scenario i have defined this case in IBM Watson, now my motive is whenever user is clicking any of the links i need to trigger another case. But for that i need to check which one did he choose.
You can use DOMParser(), querySelectorAll() and map() like the following way:
var json = {
"text":"<ol><li id='it_1'>Item1</li><li id='it_2'>Item2</li><li id='it_3'>Item3</li></ol>"
}
var doc = new DOMParser().parseFromString(json.text, "text/html");
var ids = [...doc.querySelectorAll('li')].map(el => el.id);
console.log(ids);
You first need to add that list elements into the DOM
Then you need to attach click event listeners to each of the <li> elements
Using that listener you can access the id and other attributes of that element
var obj = {
"text": "<ol><li id='it_1'>Item1</li><li id='it_2'>Item2</li><li id='it_3'>Item3</li></ol>"
};
document.getElementById('container').innerHTML = obj.text;
var liElems = document.querySelectorAll('ol li');
for(var i=0; i<liElems.length; i++){
liElems[i].addEventListener('click', function(e){
console.log(e.target.id);
});
}
<div id="container"></div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I want to have the not clicked image first, and then when clicked (as long as it's been pressed [not hover]) I want it to have the other image, but once it gets released, it should follow a link. Is this possible, if so, how do I do it?
Thanks in advance.
with javascirpt it is easy:
put the image in a div.
you need something like (not tested allright?):
var firstclicked = false;
var released = false;
var image = document.getElementById("yourImage")
image.onclick = function ()
{
if(firstclicked == false)
{
var image = document.getElementById("yourImage");
image.src = "directorynewimage/pathnewimage";
firstclicked = true
}
}
image.onmouseup = function()
{
if (firstclicked == true && released == false)
{
var image = document.getElementById("yourImage");
image.parent.innerHTML = "HREF";
released=true;
}
}
Allright?
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want to play/pause two audio files by using single control anyone can please help.
if I click on play button the two audio files should stop and same pause also..
just do this in js for each of your audio tag :
var a = document.getElementById("audio1");
a.play();
for example :
var audioElements = ['audio1','audio2'];
function playAudio() {
for(i = 0; i < audioElements.length;i++) {
document.getElementById(audioElements[i]).play();
}
}
function pauseAudio() {
for(i = 0; i < audioElements.length;i++) {
document.getElementById(audioElements[i]).pause();
}
}