Trying to get a Material Web Component Select Menu to behave according to its demo but it seems the documentation does not include which JS components to import.
I have tried import {MDCSelect} from '#material/select';, following convention with its other Web components but I get an uncaught reference error: ReferenceError: mdc is not defined.
I seem to be missing a base class or I'm importing the wrong JS component but am not sure which to include.
Does anybody have knowledge about this?
Update - 10/26/2018
I posted this question on Github and received a response. I believe it is the correct implementation as it hasn't thrown any errors but a previous bug has kept me from fully testing of this approach.
I will return to this question as soon as I can test the suggested answer in the above link.
Checkout this example,it will help. It need just mdc instance to initiate the mdc-select.
> https://codepen.io/cubetastic/pen/ZoPNKK
Related
I am trying to get a custom component working in Formio.js. I would love a complete, nontrivial working example.
I am not using angular, ng, react or the form.io service.
The documentation is terrible. I can copy out the Checkmatrix example code and run it (after much fiddling) but even it doesn't work correctly: in the formbuilder, the edit and delete controls don't show up. (There an bug issue open on this, but no resolution, which is distinctly worrisome.)
There are dead links all over the SDK reference documentation.. like for example for "Component" which seems particularly important.
There is no documentation of any of code used by the example. For example, it uses the 'renderTemplate' call, but the arguments are not described anywhere.
It appears that the only way to understand any part of this system to try to figure out all of the source code. There are no instructions for adding code.
It's not even clear what the best way to proceed is: whether I should fork the formio.js repo, learn TypeScript, and add components directly (creating a hassle if I ever want to keep formio.js up to date) or continue trying to work by registering components from add-on scripts in the browser.
** Can anyone give concrete advice on the best way to go? **
#nathaniel Tagg I couldn't find form.io proper form examples, so i would like to see your form.io examples if you are like to provide. Here is my email 'udara#staff.medicalwizard.com.au'
I used error boundary inside (componentDidCatch)I want to log which react component is break in producation build.
conclusion is get react component Name inside componentDidCatch in producation build.
I read many article and below link this is same as I asked in question but it's not solve my problem.
Getting React Component by name
and I also saw some webpack related things (production config's uglify) but it's not proper clear.
let me know if any simplest way to solve this issue
By design, you should never be able to see debugging information in a production build. What you are trying to accomplish here is an anti-pattern. However, if you still want to go through with it, you can use:
this._reactInternalFiber.elementType.name
Note that it might be instable due to using a private property that belongs to React.
I am trying to use the rc-slider React component on a existing Rails application that is using react-rails gem and it already have some other components that were built within the application that work just fine.
Based on this blog post I've been able to follow its first 3 steps, I've found the minified and browser-ready version of it here, added the file to the suggested path and required it on the application.js as recommended but even seeing the code within the Sprockets generated application javascript file that is rendered on the browser I can't see or use the supposed global variable it would provide according to step 4.
In the component's examples page it uses a const Slider = require('rc-slider'); statement in order to get that available. I've tried that but without luck as it throws: Uncaught ReferenceError: require is not defined. The same happens when I try the README usage's section approach: import Slider, { Range } from 'rc-slider';. I've tried both from an existing JS where I load other React components and also from the browser's Dev Tools Console window.
Am I using the wrong approach to the problem or maybe missing/overseeing any concept or basics here?
If you want to use Sprockets, you can get a pre-compiled version of rc-slider from unpkg:
https://unpkg.com/rc-slider#6.0.0/dist/rc-slider.js
Taking a look at the source, I see it exports the library as rc-slider:
So you can access it as window["rc-slider"] and use it from there, for example:
var RCSlider = window["rc-slider"]
var container = document.getElementById("container")
ReactDOM.render(
<div>
<RCSlider />
<RCSlider.Range />
</div>,
container
);
jsfiddle
That way, if you put rc-slider.js in the asset pipeline, you can use RCSlider in your javascripts.
Are there any instructions or example set ups for how to inject dependencies in Angular 2, latest release?
The Testing Guide is still incomplete, and only takes you so far. If, for example, you want to test a component that takes #Input() parameters, my understanding is that you specifically need to inject it, but I've run into some problems getting this to work.
When I try to follow examples such as this one I get errors about configureCompiler not being a part of #angular/core/testing. I believe this may have been moved into TestBed but when I try to use call TestBed.createComponent(MyComponent) I get an error that there's No provider for TestingCompilerFactory! And when I try to import it from #angular/compiler/testing I get a Typescript compiler error that it isn't there. Doing a grep, I can find the file it's in in my local node_nodiles but then that file gives a bunch of Typescript errors if I try to import it!
Is there any straightforward guide on how to do this?
Getting testing in RC5 can be difficult as it's still so new. You can look at this angular2-starter (https://github.com/antonybudianto/angular2-starter) and see how he has implemented testing in RC5.
I have added the following bit of code in my angular2 app to help MDL re-register the components when moving around the app...
ngAfterViewInit() {
componentHandler.upgradeDom();
}
And although it seems to be working ok (as expected) I am getting the following error...
(16,5): error TS2304: Cannot find name 'componentHandler'.
I'm still quite new to angular2 and typescript but I guess I need to import something so my code knows what componentHandler is(even though it must know what it is because it works and doesn't work without this code??? confused)
It should help you to add
declare var componentHandler: any;
at the top of your code. Please refer to the corresponding handbook section on Working with Other JavaScript Libraries in TypeScript.
if you are using cli.angular tool for generating your app
do this, so that no need to duplicate the code everywhere.
add below line into typings.d.ts file
declare var componentHandler: any;
reference the file into your component file as below
/// <reference path="../typings.d.ts" />
I guess you need to add
declare componentHandler;
componentHandler.upgradeDom();
See also Calling JavaScript directly from TypeScript