I uploaded my code into Stackblitz my code
I want to get <app-footer> view in my endlessblow.component.ts by #ViewChild (line 24) or similar adnotation but the problem is this <app-footer> is placed in app.component.html so it is not a child of endlessblow.component.html so adnotation #ViewChild will not work here. If I put <app-footer> into endlessblow.component.html it works correctly but I want it to be places in app.component.html.
Kind regards Andrzej.
Related
I am building an AEM component but it is overlapping with existing components on edit page
Here's the html file:
<sly data-sly-use.template="core/wcm/components/commons/v1/templates.html"></sly>
<sly data-sly-call="${template.placeholder # isEmpty=true}"></sly>
I have also tried the following code in the html file:
<sly>
<sly data-sly-test="${wcmmode.edit}">
<div class="cq-placeholder" data-emptytext="sample component"></div>
</sly>
</sly>
But both code result in the same situation, as you can see the below screenshot, the sample component is overlapping with the "Drag Component here":
Does anyone know how to fix this issue? Based on this tutorial I think I have followed everything: https://blogs.perficient.com/2017/08/06/aem-component-placeholders-the-wcm-core-component-way/
I have such a html in my app.component.html:
<login-menu></login-menu>
<top-menu-bar></top-menu-bar>
<div class="grid-container">
<router-outlet></router-outlet>
</div>
As you can see it is simple. Top menu bar injects components into router-outlet. How can I make that injected component could change this router-outlet tag content? Let say I want make that injected component have something like this:
<a (click)="showPersonalProfile('1')" >{{person.name}}</a>
and on click parent component router outlet was changed. I tried to do it by EventEmitter but I failed. Do anyone have any example how to solve it?
router-outlet is a placeholder, to show any component which matches a particular route defined in the routing-module.
By changing the route, we can control which component's app-selector gets substituted in-place of router-outlet.
So, to answer the question How can I make that injected component could change this router-outlet tag content? , we can do so, by navigating to that particular component using router.navigate(['path'] inside the showPersonalProfile() method.
In the function call the router navigate and set the primary path to the url you want as below
router.navigate([{outlets: {primary: 'path'}}]);
I am trying to set innerHTML in a div but the directive used in the text is ignored. I am not sure if it is a invalid attribute(according to HTML) So below is my code:
<table class="table">
<tbody>
<tr>
<td>
<div [innerHTML]="issue.longText"></div>
</td>
</tr>
</tbody>
</table>
the value of issue.longText in component.ts is:
<ul><li>20/07/2018 - Hello!This is the test issue on click on it(<span [issueOpener]='{"recordId": 4, "page":1}'>link</span>)</li></ul>
And when I inspect the div I've got the following:
<ul><li>20/07/2018 - Hello!This is the test issue on click on it(<span>link</span>)</li></ul>
Directive issueOpener is removed from the span. So how can I prevent this directive? Any help would be greatly appreciated.
This is wanted behavior and here is why : when you write Typescript code, you aren't writing your final application. Your code needs to be compiled first.
To be compiled, your code goes through a process ran by the CLI : during this process, the compiler replaces every piece of Angular code with valid JS code.
This means for instance, that (click) event become onclick (This one's not entirely true, but that pictures the point I'm making).
When you use innerHtml, you write final code : it won't be compiled. It's not Angualr code, so it won't work like you hoped.
Ajay you can do one thing and that will surely work in your case.
Please refer following link:-
Angular 5 - How to call a function when HTML element is created with *ngFor
You can write logic on ngAfterViewInit() that should be responsible for adding directive at the HTML which is now loaded so that directive can be added dynamically.
Refer:-
How to dynamically add a directive?
Im new to angular and i have created website using angular. When i Login it shows the username in the top of the page(shown below)
my requirement is, when i click it i want to take the user to another(for example user details page) But what i have done in my .html and .ts files doesnt do anything
The relevant html code part
<div class="m-2">
<i class="fa cursor-pointer" (click)="Navigatekbuttonclick($event)">{{username}}</i>
</div>
the relevant .ts part
Navigatekbuttonclick(){
this.router.navigate([/userdetails]);
}
Can anybody help on this navigation part please and tell me whats missing
The path you passing in parameters needs to be in quotation marks.
Try this:
Navigatekbuttonclick(){
this.router.navigate(['/userdetails']);
}
But in order for that to work, you must define the route in your router :
{path:'/userdetails', component: userDetailComponent}
Here's a link that can help you : Angular Documentation
I know there are similar questions answered to this question, but none of the solutions worked for me. I have the following folder structure:
static
----calendar
--------calendar.controller.js
--------calendar.view.html
----home
--------home.controller.js
--------home.view.html
----app.js
----index.html
Inside calendar.controller.js I have created a directive for my calendar that looks like this:
.directive('myCalendar',function(){
return{
restrict:'E',
template:"calendar.view.html"
}
})
I am trying to render that calendar template from home.view.html without success.
I have this in my home.view.html:
<my-calendar></my-calendar>
On the browser it actually displays the path I am trying to make him bind (on the browser you can see "./calendar/calendar.view.html"). And I've tried changing the directive's path in many ways:
- template:"./calendar.view.html"
- template:"/calendar.view.html"
- template:"./calendar/calendar.view.html"
- template:"/calendar/calendar.view.html"
... but it still won't work. Thank you.
template:"calendar.view.html"
that is a mistake
you need templateUrl:"calendar.view.html"
instead