I'm rewriting my website https://ixtutor.com/ completely in angular. I've created few components that render as widgets on a blog page.
For example, on a blog post https://ixtutor.com/tensorflow-basics-with-housing-prices-prediction-example-chapter-i/ , there are widgets like,
(i) Code runner widget
(ii) Exercise widget
I'm modeling these widgets as components in my angular application.
Problem: One of the page in my application is a live html editor, which allows an author to write the (angular) html templates in a textarea T1 and see the (rendered) view side-by-side. I also want the author to be able to use the widget components in the html that they create.
This works great with regular html tags, where I can use the innerHTML property of a div to directly bind the ngModel of the textarea T1, however, it doesn't work for the angular components.
I've looked at dynamic angular components but I cannot figure out how to use that in a full-fledged html template. Any recommendations or suggestions will be really appreciated.
Thanks.
Angular does not support inserting dynamic components in the template at runtime. It has to know at compile time which components will be inserted.
The only way is to compile your Angular components to web components using Angular elements, that way, you will be able to insert them as custom HTML elements in your application.
You will have to develop them in a separate library for this.
Related
I have an angular app that I need to use as a source of the components for my new app that will be mostly using pure HTML. I need to get the HTML and CSS from the Angular app.
The problem is, that the app uses custom components such as <mat-icon> that are not standard HTML tags. I assume, that under the hood they eventually consist of simple HTML elements but I can't figure it out. Is there any method to convert an Angular website to plain HTML & CSS? I know that the dynamic content can't be extracted, but I mean only the view. Maybe there is a Chrome extension to do that? I do have access to the app source code, so it can be also some npm module.
I am working on my own Mediawiki installation and developed a skin based on Bootstrap 3 (MediaWikiBootstrap). There are a few issues which are taking time to resolve and few cases i am not sure how to resolve.
I used ContactPage extension and could not find an easy way to use bootstrap form css classes. there are options to use 'MediaWiki UI' for that contact form but i am facing the same problem with the other pages, like the All articles, search page and so on.
so is there any way to use 'MediaWiki UI' in all the form and can i create my own form style using Bootstrap3 css classes?
There is a configuration variable ($wgUseMediaWikiUIEverywhere) which, if set to true, should activate mediawiki ui on every form element (that is build with the Html or Xml MediaWiki class) in MediaWiki (excluding forms build with string operations).
For the long term it is planned to remove this variable an activate mediawiki ui by default.
If i understand Bootstrap correctly, there is no easy way to add/remove classes to elements generated by MediaWiki.
Btw: There is already a bootstrap skin, maybe you can reuse this? https://www.mediawiki.org/wiki/Skin:BootStrapSkin
Can We use angularjs and handlebar.js in the same page.
If so how to use angularjs and handlebar.js in the same
html page.
I suppose you could. If the handlebar-generated content will contain Angular directives, you will likely need to use the $compile service after you insert the generated HTML into the DOM.
See also AngularJS is too humble to say you’re doing it wrong and adding support to angularjs templates, so one can use handlebars or angular in the client-side
I am new to Vaadin.
I have created template for my web application in HTML and JS.
How to use the developed template with Vaadin as am not sure if I will be able to develop same template using Vaadin only?
It may be possible to re-use some of the layout of the template using the CustomLayout layout component in Vaadin.
You can also render the contents of a template into a Label component, and display the label in the application. See http://demo.vaadin.com/sampler#LabelRich for a small demo.
Generally, though, the idea of templates and "pages" is orthogonal to developing applications in Vaadin.
A designer company have made a prototype of a web application using HTML/CSS/JS, with forms, menus, roll-over sub-menus ... Now I have to take this prototype and build GWT views using widgets.
My question is : Do I have to start from scratch and build every view with UIBuinders and integrate the CSS files or there is an easy way to do this ?
Thanks
My suggestion - don't generate HTML. This basically means not using GWT widgets (or only using widgets that provide .wrap(element) method.
I'm taking this approach with my projects and works very well. I put all HTML in one big file and then hide (display: none) all divs. Then I use gwtQuery to identify, copy and show relevant parts. qwtQuery is also used inject behavior (event handlers).