What I want
Use the library HTML-GL inside a component in my Angular project (with the Ionic framework included).
What I got now
I included the library scripts inside my index.html, right above the polyfills.js - like this:
<!-- HtmlGL import -->
<script async src="assets/js/htmlgl.js"></script>
<script async src="assets/js/htmlGL_pulse.js"></script>
Right now the following web element works in index.html:
<html-gl>
<h1>This is an animated header</h1>
<html-gl>
What goes wrong
When I place the html above in a separate component I get the following error:
Uncaught Error: Template parse errors:
'html-gl' is not a known element
How can I make sure the component is aware of the `html-gl> tag?
To use dom elements which are not in the Angular registry you have to import the custom elements schema from angular core and append it to the schemas of your NgModule.
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';.
Related
I am trying to use defineCustomElement from Vue 3 to make Single File Components into custom elements.
However when I try to import a local stylesheet to the elements I get the error message: Refused to apply style from 'http://localhost:8081/assets/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I have created a basic Vue 3 project as per these instructions.
In my main.js file I have
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
import { defineCustomElement } from 'vue'
import HelloWorld from './components/HelloWorld.ce.vue'
const HelloWorldElement = defineCustomElement(HelloWorld)
customElements.define('hello-world', HelloWorldElement)
and in HelloWorld.ce.vue I have added:
<style>
#import url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css");
a {
color: #42b983;
}
#import '../assets/styles.css';
</style>
in the index file I have replaced the tapp with my component:
<hello-world></hello-world>
I've also created a basic CSS file under /src/assets/styles.css.
The bootstrap import works, as do CSS rules written directly within the <style> tags. However the imported local stylesheet will not work - I am sure I have the correct path. I have also tried importing it directly into main.js which also doesn't work.
Here is a Code Sandbox with the structure: https://codesandbox.io/s/staging-fire-lox4y9
Is there a way to have one stylesheet that works across multiple custom elements?
I'm using Angular CLI v13.3.6 with Node v16.12.0 and I've a problem when I use innerHTML property.
I'm using Angular CLI v13.3.6 with Node v16.12.0.
In typescript file I've a variable with an ordered list like this:
let myText = "<ol><li>first</li><li>second</li></ol>";
I need to show this text in a disabled div, so this is the code that I'm using in the html file:
<div id="myId" class="myClass" [innerHTML]="myText" disabled></div>
The result is that the text is shown but the numbers not. The same issue is present when I use the unordered lists. How can I do?
For security reasons, Angular compiler does not accept any string to be injected as HTML. You can bypass this by using DOMSanitizer to "trust" the string and parse it as valid HTML.
You will have to import DomSanitizer and inject it in yopur constructor like:
import { DomSanitizer } from '#angular/platform-browser';
constructor(private readonly domSanitizer: DomSanitizer) { }
And then use DomSanitizer to trust your string to parse it as HTML. You can use like this:
this.domSanitizer.bypassSecurityTrustHtml(YOUR_STRING_HTML);
This has nothing to do with Sanitize html. It is CSS issue.
So to avoid overwritten CSS. You could try:
Creating a brand new angular app: ng new. This way no third party CSS involved
Open the app in Incognito/Anonymous mode, this will help prevent any browser extensions to interfere with your app
When developing my project, I look at others for an example. When I looking at Instagram website. I see the class name of html is change when user is login. May I know how to achieve that actually? As what I know, react only live in one of the div in html structure.
// This code will render a component in the html root.
ReactDOM.render(<App />, document.getElementById('root'));
// But how to serve a whole new html file in react
How to serve a whole new html file in react? Is it violate the concept of react?
HTML and Document body are outside the React realm of DOM handling. So you can use good old querySelector for setting the class names.
function LoginPage() {
useEffect(() => {
document.querySelector('html').classList.add('login-page');
}, []);
return (
// stuff
);
}
A handy package is the React ecosystem for these is React Helmet
import {Helmet} from "react-helmet";
function LoginPage() {
return (
<Helmet>
<html className="loginPage" {...anyOtherStuff} />
<body {...attributesOnBody} />
</Helmet>
);
}
If you would like to add nodes that are adjacent to the root node in the body or React provides you with a solution called Portals that can render anywhere.
For the abiity to change index.html itself, you would not be building yourself a SPA anymore which seems to be case to use React.
you should add a class to your html input to retrieve it.
Here is an exemple :
import React from 'react';
import ReactDOM from 'react-dom';
class X extends React.Component {
render() {
return <h2>TEXT HERE</h2>;
}
}
ReactDOM.render(<X/>, document.getElementById('root'));
React works in a way that attaches itself to some DOM element. In your case, you are attaching it to some element with id of root.
TLDR;
Your index.html will contain the code of your application inside the element with root id during the runtime in the browser. You can see it by inspecting it using browser developer tools.
Your <App /> is the root of your application and if you use dev tools of your browser and you inspect the DOM tree you will see components in there. They are just dynamically attached by React (ReactDOM) and React is in the control of when and how things are rendered.
If your components look something like:
import React from 'react';
function App() {
return <h1 className="title">Hello!</h1>;
}
In Dev tools your DOM structure will looks something like this:
<div id="root">
<h1 class="title">Hello!</h1>
</div>
Here you can see that you have element with root id that you attached your <App /> before and you can see the content of <App />, <h1 class="title" /> together with classes.
That is also how Instagram works and most of the single-page applications or SPAs in short.
There is also a possibility to render static version of your application.
I am trying to learn redux and react and I sort of getting how it all works but every example I see is so simple that when I started my own webpage I got stuck rightway.
All the examples are just one or 2 components on a blank page, they might be styled to look nice but there is nothing else, no headers, footers, no nav bars nothing.
So for me, I have a header, footer, main container and a side bar, that lists all the users items that are clickable.
I have no clue where to write the static html(are they dump components or just html?), I don't know how to render multiple smart components(side bar, main container what displays contents of what was clicked on in side bar).
Every tutorial I see gets everything written to the one div
<div id="root"></div>
Do I have many of these for each area and then have mutiple of these?
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
<div id="root"></div> in your index.html is the "target" for your React application and only appears once.
Similarly, you only need to render App to the reactDOM once. Your App component can then render multiple components itself, for example
import React, { Component } from 'react';
import Header from './components/header';
import Footer from './components/footer';
import MainContainer from './components/main_container';
class App extends Component {
render() {
return (
<div>
<Header />
<MainContainer />
<Footer />
</div>
);
}
}
This assumes you have created Header, Footer and MainContainer components. Your App component can be thought of (very simplistically) as a larger component that contains multiple components. Therefore, if you render App to ReactDOM you are effectively rendering the other components contained within App.
Please note: this assumes the use of webpack, babel and es6.
Facebook has a great tutorial for building app in react-native, this section explains redux things:
http://makeitopen.com/tutorials/building-the-f8-app/data/
This section is basically how to architect in ReactJS + Redux, so don't be afraid the react-native things, this section is almost the same as in web apps.
you can find code here
I have been using React and look to use Polymer tags inside of React. React does not recognize Polymer tags as React only handles basic DOM tags. Is there a way to add the Polymer tags to React DOM library?
Yes, it is possible.
Create a polymer element.
<link rel="import" href="../../bower_components/polymer/polymer.html">
Polymer({
is: 'calender-element',
ready: function(){
this.textContent = "I am a calender";
}
});
Make the polymer component a html tag by importing it in a html page. E.g. import it in the index.html of your react application.
<link rel="import" href="./src/polymer-components/calender-element.html">
Use that element in the jsx file.
'use strict';
import React from 'react';
class MyComponent extends React.Component{
render(){
return (
<calender-element></calender-element>
);
}
}
export default MyComponent;
Is it possible to use Polymer inside of React?
Short answer: not really.
Long answer: kinda. You have to create components which directly create the nodes and manipulate attributes. There are also other considerations for children of the element, etc.
Is it possible to use React inside of Polymer?
It's pretty much the same answer this way, you'd have to wrap a React component in a polymer element.
Why?
Polymer (based on web components), and React (a ui component library), are both based on 'components'. Because there's no single way to express a component in web, you'll need to bridge between the various libraries. The same holds true for questions about 'react in angular', 'jquery plugin in react', 'knockout in jquery plugin', 'react in backbone', 'angular with polymer elements which use backbone and react with polymer elements which use angular', etc.
In a case like angular with polymer, you might think it's very simple, but polymer doesn't know about evaluating angular expressions, or any kind of declarative callbacks. You need a bridge in nearly every case, and they're never pretty.
this is a fairly old question but how about https://www.npmjs.com/package/react-polymer ? isn't this a support of polymer components for react?
import reactPolymer from 'react-polymer'; //IMPORTANT: Must be imported before React.
import React from 'react';
reactPolymer.registerAttribute('raised');
reactPolymer.registerAttribute('url');
reactPolymer.registerEvent('response', 'onResponse');
<paper-button raised>another button</paper-button>
<iron-ajax url="http://example.com/" onResponse={this.handleResponse} />
Answer according to current stages of react and polymer
Since this question was asked a while ago and a lot has changed since then, I'd like to add that you can now use polymer elements in react directly but for your custom attributes and events it causes problem it can easily be handle by using react-polymer, It has support for almost all elements, with exception of gold-* elements.
Why would you want to use Polymer with react?
It can further simplify your development process or make it a big mess. It depends on how you use it
Speed of development and ease of use offered by polymer components is unrivaled.
React can further break down your components comprising of polymer components, into manageable pieces.
Simply because, react and JSX is love.
Hey why the hell not??
The answer is YES. But it is not straight forward. So, I tried following some documentations which are around in fact even the official one but the best was this: https://medium.com/jens-jansson/start-using-web-components-in-react-6ccca2ca21f9
I followed the steps mentioned and it worked! I am also mentioning the github repo wherein I tried to integrate the vaadin datepicker and also one of the polymer element paper-input. https://github.com/manit815/react-with-webcomponent
Yes, you can use Polymer element inside react.
Create Polymer element
import { LitElement, html } from 'lit-element';
export class CustomButton extends LitElement {
static get properties() {
return {
isDisabled : { type: Boolean },
buttonType: { type: String },
};
}
constructor() {
super();
this.isDisabled = false;
this.button = 'button';
}
render() {
return html`
<button>
<slot></slot>
</button>
`;
}
}
customElements.define('polymer-button', CustomButton);
Import the element into an HTML file using <script type="module">.
Use the import statement (as shown above) to import it from another ES6 module.
<script type="module" src="./polymer-button.js">
Once you've imported it, you can use a custom element just like you'd use a standard element.
import React from 'react';
export const PolymerButton = () => {
return (
<polymer-button />
)
}
I just tried this today and I was able to successfully use the material elements from their element catalog. I haven't gotten around to testing it thoroughly, but as far as using the tags in React goes, it works and all the html and css is there.
To use existing elements, just follow their using elements guide.