My goal is to import some functions into vue component. That functions represent business logic of component. When I refer to this inside a function it have to be context of vue component. What would be the approach to accomplish this? Option api maybe would be preferred.
Related
I'm using Angular 15 and #angular/material. I've created a standalone component that uses the mat-dialog-title, mat-dialog-content, and mat-dialog-actions. This component, as you can probably tell, is being used with the MatDialog. Unfortunately, when I render the component in the dialog, some of the css variables coming from material are undefined for some reason, while others are not.
I'm not sure what I'm doing wrong or why some of the variables would be defined, but not others. This is causing the styling to look pretty weird. Is there a dependent module I need to import besides MatDialogModule in the standalone component?
Since the component is standalone, I figured this didn't matter, but the component is located in a separate library project (exported from there).
Just recently I have begun working with React, and to some extent front-end development. I am using the Material UI framework to develop an application, and I have chosen to use its "styling with JavaScript" approach: styles are defined as JavaScript objects, rather than traditional CSS, for example. All good so far.
I have my components in a component directory, and in a separate directory called style I have a matching file for each component where I define the useStyle hook (per component). That way, each component's style is defined via a unique import.
Now that I am integrating a non-Material UI third party library, the styling it ships with is defined with CSS, so I can just import the CSS file in my React component file to use the styling. But now I end up with a mixture of styling techniques.
Is there a single, consistent, and recommended approach for styling React applications? Is using multiple styling techniques recommended?
Im trying to add this new library to a project, but Im having doubts regarding how to share the Page Component Store with its smart components children. I know that I could use Inputs and Outputs but I think that this approach were like tradicional ngrx used.
I think that I could use the component store with 'provide in root'. would this approach correct?
There are a couple of ways to do it. You could create a facade service that references it in its providers array, but in my opinion this is not ideal as it kind of defeats the purpose of having a simple single file component-store to manage your component's state.
I found that I had to add the providedIn: 'root' setting to my decorator in order to share state between a parent and children components. I know that this is not ideal, but if you simply add it to each component's providers, I found out the hard way, that you will find you are accessing different instantiations of the component store and when you navigate to a new child component (even if the parent is in the view still), that the state will not be maintained because it will be a new state container. That's why I like using providedIn: 'root'.
I had the same issue today...
If you provide the WhateverStoreService in the root, the default behaviour is that one instance of the service is shared in the whole application. (It's some kind of global state again)
If you want a separate instance of a dependency to be shared across each instance of a component and its children, configure it on the component’s providers property.
#Component({
selector: 'parent-view',
templateUrl: './parent-view.component.html',
styleUrls: ['./parent-view.component.scss'],
providers: [WhateverStoreService]
})
Now you can inject the WhateverStoreService in the constructors of your parent and child components.
It is all about the dependency providers and where you inject the instances.
You may use the root - then you will end up with a single instance of your ComponentStore, available for the entire app. It is a good way for global data, like the number of items in the cart, for some e-commerce app.
Then the code can look as follows:
#Injectable({
providedIn: 'root'
})
export class CartStore extends ComponentStore<CartState> {
You may provide ComponentStore in the parent component, this will make it available for the child components of that parent. By that I mean all child and parent components will share the same instance of the ComponentStore. For that you can use the following code:
#Component({
selector: 'app-parent',
providers: [ParentStore],
})
export class ParentComponent { ... }
I want to create a web component using svelte. To create a web component it's necessary to include the svelte tag option
<svelte:options tag="{"my-custom-component}"></svelte:options>
It creates a custom component with that name but doesn't work properly because we have to provide this tag for all the child components as well! I added it to all the child components but it still doesn't work, turns out I use third-party libraries and I don't know any way to have that option there!
Is there a way to create the custom components with svelte which includes third-party libraries?
You can use regular svelte components (including third party) ones inside your component.
But you'll need to compile those with different compiler settings in your rollup/webpack config.
And due to the nature of scoped styling in web components (Shadow DOM) the css won't work in these components. So it depends on the library if it still works.
You might be able to turn off scoped styling in the future:
Issue #1748: Custom element without shadow DOM
But scoped styling could have been the reason why you wanted/needed webcomponents in the first place.
I know this is a very bad approach when we try to add two different css frameworks in a single project. But for now, due to a project requirement, I need to add bootstrap and materialize css in a project. In root component bootstrap is used, and in child component I will use materialize.
In child component I have included materialize in the following way
import React, {Component} from 'react';
import {findDOMNode} from 'react-dom';
import screenFull from 'screenfull';
import material from 'materialize-css/dist/css/materialize.css';
import './Control.css';
but adding this way overlaps bootstrap classes which is obviously not the required behaviour.
I want to limit scope of materialize.css inside the child component only. Can anyone give me a suggestion on this?
Note: Root component was developed before, and create-react-app is not used over there. webpack configuration file has been written manually.
Please use https://fezvrasta.github.io/bootstrap-material-design/ for your project as it's based on the bootstrap the UI will have look and feel like material and you haven't to change the existing code. I recommended to use only one UI framework for you project.
As I have seen that you are facing a problem where you need to include both the css framework, I better suggest you to use https://mdbootstrap.com/.
The second thing which I suggest you is to include in your application not for specific component. If you want to make some change for specific component look and feel create separate css/scss file and include it to you component.