We know we can extend an angular component but I would like to also extend the template associated. I mean, for instance, I could define an abstract component with its template with kind of skeleton, and then in the children would be forced to implements not only the abstract class methods and so on, but also the "empty gaps" of the skeleton html template.
Up to now, I have to completely redefine the template in the child.
I know that I could create another component but that a relatioship by association. It's annoying because I have to create an abstract class to be extend and then a component to redefine the template.
How do you do that?
Thank you in advance!
This is not possible. What could be useful to you is content projection
https://blog.angular-university.io/angular-ng-content/
Related
I am trying to implement a web custom element in typescript.
I have found that the custom element gets its life cycle callbacks like
connectedCallback()
adoptedCallback()
attributeChangedCallback()
Is there a typescript interface for these callbacks?
I can write these methods with appropriate signature but I would prefer to use an existing definition.
In chisel, we should always extend from 'Module' to define our own module, right?
But, I can only find the definition of 'Module' at 'core/src/main/scala/chisel3/Module.scala' - it's a 'object'! We extend from an object? Or sth I've missed?
When you extend Module the class hierarchy looks like
Module <= abstract class LegacyModule. So it is a class. There is also a object Module that has apply methods that are used differently. BTW, having a good IDE like IntelliJ can make it much easier to navigate class hierarchies and figure out where things are coming from.
I have the following scenario. I am writing a complex component that is using three-js:
The component manages complex mouse interactions and updates other elements in the DOM using two-ways data binding: variables, JSON objects, mouse interactions, etc.
I start using the component in few part of my application but I needed to substantially modified the threed-viewer.html so I made a copy of the whole component ending up having duplicates that are hard to maintain.
All flavours of the component share 80% of the javascript code and bindings but they have substantial UI differences. So I had the though of create different 3 basic component (minimal javascript code) that I can inject into the threed-viewer.html using a selector and a variable to decide which template to load:
this does not compile as the html files have all the variables and bindings from the original components but they are not present in the typescript files.
Another solution could be to have a single html managed via ngIf but it will result in a long, messy, difficult to manage file. Is this the only option I have in Angular. Any other idea?
Thank you.
You can have a shared service and then add three different components but js code won't be duplicated as it will be in the service.
Use two way bindings in all 3 components using the service variables, functions and objects
I have did long time ago - the pages and article editor. Two different templates, same code.
I used articles component as "parent", and extended it to news editor.
Looks like this:
#Component({template: 'blah blah blah'}) export class parent {}
#Component({template: 'blah2 blah2 blah2'}) export class child extends parent {}
Hopefully this is the solution you were looking for.
Two different components, two templates, one code.
Of course, you can have the "parent" abstract class for both where you can save all methods you need.
It's OOP baby ;)
I am trying to write a custom DOM helper similar to dom-if and dom-repeat which extends template. It takes an attribute say partial name. Based on this partial name it would make an ajax response and get actual content part of template which has Polymer data binding markup also. So it basically needs to do lazy render of content.
If i want to have a common piece of UI across multiple pages, such as a menu, what is the recommended way to do this?
It would contain both template code and a back-end controller (similar to "snippets" in the LiftWeb framework).
I am aware that there is a menu module for Play, but I'm more interested in how this would be achieved in general.
There are two ways to include common view code into the Play Framework.
You can use the #{include} tag or the #{extends} tag.
The extends tag, as the name suggests, extends from a parent view. The extends tag is used by default in the skeleton code set up by Play when you create a new application. It extends the main.html. You add your code here.
The includes tag, allows you to inject a common piece of view code into your templates at a specified point. This works in much the same was a php include/require, or jsp includes work.
The problem will come when your template code also requires data or logic from the model (via the controller). If this is the case, then you will need to use the #Before or #With notation in your controller to ensure that the common piece of controller code is executed each time. You can add any data to the renderArgs list, so that it is available for use within the view.
A simple example of using renderArgs would be.
#Before
private static void commonData() {
// do your logic here
renderArgs.put("menu", menu);
renderArgs.put("selected", selectedMenuItem);
}
the values you have put into renderArgs (menu and selected in the example) will be available just in the same way as if you passed them into the render method.