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.
Related
I have an external blazor component with 2 attributes like below. I am resolving through a function by passing the value of Href attribute.
<ComponentLink Href="bookings" Active=#GetCurrentLink("bookings")>
1my question is there any way to reference or bind the value of attribute value directly from another attribute without passing through a variable.
Basically something like
<ComponentLink Href="bookings" Active=#GetCurrentLink(#Href)>
I am asking this because it is within link list for a navigation and i dont want to create a fiel or property for each Href element. I can fix it on the ComponentLink source code possibly but I don't have source code access as it is in nuget package.
I have tried using #ref but It also doesnt help as intented.
There is no easy way to achieve this.
You can look at the component definition in the same way as the class constructors. You will have the same problem when you want to pass the same value there.
The best option, in this case, is to extract the text in the variable and reuse it.
You can also define your links in your C# code as an array and just enumerate the links to render the ComponentLink components dynamically.
Here is an example of this approach: https://blazorrepl.telerik.com/wmFYwAvG39LqBZFb06
The option with the #ref is not working, because the #ref value is populated once the component is rendered and typically, you will need to evaluate the Active value before that.
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 node script set up to scrape pages from an AngularJS application and then generate code needed for testing purposes. It works great except for one thing. ng-if. Since ng-if removes elements from the dom the script never sees these blocks of code. I can't remove the ng-if's. So I'm wondering if there is some way to intercept the html between when node-phantom requests the page and when it actually loads everything in to phantoms dom. What I'm hoping to do is simply set all the ng-if's to true so that all content is available. Does anyone have any ideas for this?
EDIT I'm using phantomjs-node not node-phantom.
My Final solution was to scrape the page for all of the comment tags. Then filter through to find the ones that contained ng-ifs and parse out variable names from those tags. Then I tapped into Angular's $scope and set all of the variables to true. Forcing everything that is hidden on the page to be visible.
Let's say I have an angular directive for displaying media files (images & videos). It could look like this:
<div my-media mediatype="MediaFile.Type" mediapath="MediaFile.Path"></div>
Is it possible to hide that directive's attribute in html output? Or at least it's value.
For example, I have a similiar directive which is repeated with ng-repeat and it's "mediapath" is base64 code from html input files. Those paths greatly increase size of html and it is very hard to modify that kind of code. Also browser always freezes when inspecting such an element.
You can call to a $scope function that returns the value.
I have created a directive which draws a chart based on this post: http://briantford.com/blog/angular-d3.html?utm_source=javascriptweekly. The argument to the directive specifies a dataset to retrieve. When I have multiple directives in a page only the first chart is ever executed. Looking at the network traffic only the first dataset is retrieved.
<chart-directive datasetId="1"/>
<chart-directive datasetId="2"/>
I get no errors in the browser console. Its as if the second directive is never executed.
Any ideas?
Change your directive markup to
<chart-directive datasetId="1"></chart-directive>
<chart-directive datasetId="2"></chart-directive>
Why? Briefly, we can't have self-closing tags on our custom element directives
Source