I have used below 2line of codes in component, both are working as expected,
but why we have 2 different type of directive.
please help me to understand below code.
show content
show content
They are the same exact thing. One is just newer syntax and that is *ngfor
Related
A different DOM element
I was checking source code of youtube and found I couldn't query these elements from DOM. what are these ?
I was expecting the element to be queryable using javascript.
Update I found the answerit is a web component and can be queried as a shadow root. What problem does web component solve ?
source - https://kevinsimper.medium.com/document-queryselector-with-web-components-76a8be5bc59
These are custom tags that you wouldn't find in most code bases.
However, fret not. You can still query this elements with the following selector:
let thumbnailArray = document.querySelectorAll("#dismissible > ytd-thumbnail");
If you want to query an element, but can't figure out a selector that returns something, you can always right click on the element and mouse over the copy option, then "copy selector".
Here is the list of thumbnails returned into the array:
This is the react element of youtube. That's why we cannot query it from anywhere. We can create own element in react. These are one of those.
***** THANKS *****
I'm looking to implement condition based HTML in lit-element and need something like *ngIf which Angular provides.
I could render different HTML based on conditions but it will be great if it can be done with condition.
You can use plain Javascript. Explained well in official documentation
Example:
${this.myBool ? html`<p>something</p>` : html`<p>something else</p>`}
Expanding on Kuba's answer, it's good to be as specific as possible with lit-html conditions, as the more broad-scoped your condition is, the more of the template that needs to be rerendered when the condition changes. For example, you can make the example given in the official documentation:
this.myBool ? html`<p>something</p>` : html`<p>something else</p>`
And write it more efficiently as:
html`<p>${this.myBool ? 'something' : 'something else'}</p>`
This little change here doesn't change much, but when you can reduce the amount of rerendering of layers of components, it starts to add up.
For a more thorough explanation of how lit-html handles template rendering, see: https://lit-html.polymer-project.org/guide/concepts#template-creation
I want to use the SLDS picklist found here.
I'm using several other SLDS elements in my page and they work fine, I have included the necessary SLDS css.
The picklist doesn't actually work in the example they provide so I'm wondering if there is additional configuration required? The documentation does not mention any.
Can anyone tell me what the problem is?
As of my understanding after reading the SLDS documentation the SLDS is just a CSS "framework". For the picklist to work (open) you need to include some Javascript and more specifically the picklist is "opened" by adding a class slds-is-open to the element (picklist). Apply the class to the div stated below.
<div class="slds-picklist slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open" aria-expanded="true">
I can't really make a demo out of this since the SLDS is so complicated to install but hopefully this can help you.
Well those dropdowns require some kind of javascript or jquery so there should be a file you have to include. CSS just styles the content it doesen't make it work XD
if you not comfortable with JS you can use this JS library
or add slds-is-open class on click event
If you are working with desktop application only (no SalesForce1), a simple way to make it work without adding code is removing the trigger--click
Just let the div like this:
<div class="slds-dropdown-trigger slds-is-open"> *//your list//* </div>
And it will work when you put your mouse over the icon.
It will have a weird behavior in SalesForce1 because you can't put your finger "over" without "clicking" the screen, keep that in mind.
PS: slds-dropdown-trigger is deprecated at the moment in SLDS documentation, keep that in mind too.
I have a angular2 component which is generating data to populate my ng2-table, but I cannot seem to put HTML tags into a cell. Instead the cell renders as such:
https://github.com/valor-software/ng2-table/issues/51
I've tried to modify the js file that is coming down as indicated as an older fix but changing the markup to the [innerHtml] angular2 element does not appear to be accepted.
It seems that others are having this problem as well, has anyone else found a solution? I'm aware that ag-grid is capable of doing this, but we need to use ng2-table as it supports bootstrap pagination which ag-grid does not appear to.
I have a html page where I'm loading my directive
<kms-dir1></kms-dir1>
in that component 'kmsdir1.html' is loaded i.e templateUrl, I have defined everything and working fine, now I have a requirement to use one more directive (let's say kmsdir2) in that kmsdir1.html
In that kmsdir1 component I have specified directives and tried but it's not loading
So currently I have defined another directive also in parent page and using input and output params and making its visibility hidden and show.
Is there any alternative???? i.e to load a directive inside one more directive
FYI: I didn't see any error in console. Page itself is not getting loaded (Blank)
I would see two potential issues:
You don't define directives into the directives property of the component where you want to use them
The selectors you specify don't match any element in your component.
I was missing "#Injectable()" to the component which I wanted to use it as directive.. and my bad I was use *ng-If instead *ngIf :-p
I understood whenever page is getting completely blank and no error in console then there is error in your angular syntax.