I'm new to Angular and I have the following problem.
I'm trying to create a component that can be active. I currently set it up so it detects if an attribute called active exists and sets its internal state accordingly.
<page active page-id="page-1"></page>
The problem emerged when I wanted to remove the active state. How should I go about it? Should I switch to css classes? Or maybe use a directive?
This seems a little 'hacky' but, first you need to get the element somehow and access the attribute Map directly and just remove it like,
HTML
<page active page-id="page-1" id="page_one"></page>
Dart
querySelector('#page_one').attributes.remove("active");
https://api.dartlang.org/apidocs/channels/be/dartdoc-viewer/dart:html.Element#id_attributes
Related
I'm a bit lost learning React here.
I'm trying to get the class name of an element so I can inject an inline color depending on that class name. For example, if the element below has the class 'Active'.
<li className="active" >
I was experimenting trying to use the onChange event to see if it worked but I can't seem to fetch and print anything in the console. I assumed the event would have triggered after load and when the clase name changes, doesn't seem the case.
<li className="active" onChange={(e)=> {(console.log(e.target.className))}}
I've read a bit about React refs but it seems too much for such a simple thing. What am I missing here?
You don't need to use onChange event. You probably want to use the document object wherever you want to change the style of an element.
document.getElementsByClassName("Active")[0].style.color = '#fff';
You can use it in a function and trigger it wherever you want, or just simply put it inside useEffect hook to execute on component mount.
Can i change input value populated from component state from console by using something like document.getElementById('someId').value="some_value" in react
Yes you can.
Whatever the Library/Framework you are using to build your DOM, it will eventually produce DOM, thus, it will be available and accessed as: window, document and everything inside of them.
So, doing the following will update value of the field that matches with the parameter given to the getElementById.
document.getElementById('someId').value="some_value"
I suggest you use React Developer Tools to trace and edit value of state
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
Hope this help!
In our application, html 'input' tag is wrapped and named as lets say 'input-app'
We are using 'input-app' in different places in same html page and I am not able to do cy.get().type() on unique input tag as 'input-app' tag has 'input' which is having same ids.
Do not want to change 'input-app' component definition. What is solution to it?
I am guessing your wrapped input-app should not have the same id on every input,but it seems we are pass that point. Are there any other div elements that are parents of this wrapped input?
cy.get('THE_PARENT_ID').find('input').type('what you need to type')
If you can't change the component can you put your own id on the element that is wrapping it. for instance
<input-app id='YOUR_ID'></input-app>
cy.get('#YOUR_ID').find('input').type('what you need to type')
How do I use the Multiselect of React Widgets in Redux Form where I can allow the creation of new option as well which will be stored with redux form state. Redux form documentation do not have example with new tag creation option.
I got the solution, we need to make allowCreate={true} with onCreate={(name) => this.input.push(name)} both the attributes are necessary for the create tag option to appear.
I've never used this package yet, but I don't think the package provides a functionality to allow tag creation as it is.
Either you should implement it yourself, by providing an input for option creation and push them in to your options state object or you use another package like https://github.com/JedWatson/react-select which already implemented the desired functionality.
I think you mean onCreate={(name)=>data.push(name)} because this.input doesn't contain push method.
I would like to implement finite netsing of ui router states (it is required by the client), the maximum depth of nesting can be a fixed value (for example 10) therefore i would like my states to look as such:
.state('page',{url:'page/{pageName}',templateUrl:...)
.state('page.page',{url:'/{pageName}',templateUrl:...)
.state('page.page.page',url:'/{pageName},templateUrl:...)
etc...
In the end i would like for user to be able to enter urls like:
'/page/page1/subpage1'
'/page/page2/subpage1/subsubpage2'
'/page/page3'
etc...
The obvious problem is that ui router will overwrite the 'pageName' variable for each (sub)state, therefore after navigating to /page/page1/subpage1 i will only have {pageName:'subppage1'} variable set in state 'page' and 'page.page'.
In the whole application the ui-sref would only use the RELATIVE states so when i am in the 'page' state i would go into 'page.page' state and so on. I would like to be able to move the html view of the page up or down the state hierarchy as needed, and i would like not to change every ui-sref call in such case (right now i would have to change the variable name because it has to have different name in every state)
Is there any possibility to achieve my desired scenario? i have tried defining 'pageName' as an array type, but it does not seem to work (gets overwriten for every substate). Using custom ui router type also seems to not work since it cannot modify stateParams objects, only returns the representation of single url value (therefore the 'pageName' is also overwritten).
Ui-router extras also seems not to help here, or maybe i am missing something.