Questions tagged [components]

1

votes
1

answer
1.6k

Views

Hover on a styled component without wrapper

So I have this: const Link = styled.a` color: blue; `; Hover Change I want to put a hover effect on just the Link element to change the color to white. Any other docs I have seen would have me put a hover call when I call Link: const Wrapper=styled.div` &:hover ${Link}: white; '; Hover Me How do I...
psion
1

votes
1

answer
2.4k

Views

How can i get selected value from a select component

How can I get the selected value from a select component? select.component.ts: export class PfSelectComponent implements OnInit { constructor() { } ngOnInit() { } @Input() options : Array; } select.component.html {{option.name}} select value: {{selectedValue}} {{selectValue}} does not show the value...
Rafael Augusto
1

votes
1

answer
211

Views

Strange behavior of android's ViewModel

When I try to simulate configuration change in my app by enabling 'Don't keep activities' in developer options every time I leave an activity and return, the ViewModel is recreated! Aren't ViewModels supposed to handle these situations? I can handle this problem by saving my activity's state in onS...
Mostafa
1

votes
2

answer
9.5k

Views

How to set value to Form in Angular 6 using FormControl

Group Select {{group.name}} How can I set the value of the field to Select dynamically in the Component? I looked at the docs, https://angular.io/api/forms/FormControlName#use-with-ngmodel but still no example that can help me. Attempt: this.gGroup.get('groupControl').setValue('Select');
chris
1

votes
1

answer
139

Views

Working example of Material Design LinearProgress component

Attached are the pseudo-codes for an attempt to make a working prototype of a Linear Progress component. HTML ... JavaScript const overallProgress = mdc.linearProgress.MDCLinearProgress.attachTo(document.getElementById('my-progress-bar')); overallProgress.setProgress(0.5); The aforementioned codes a...
Abel Callejo
1

votes
2

answer
256

Views

How to integrate Nextjs + styled-components with material-ui

1. To build a next.js app using styled components it's really easy. You just have to use their _document.js snippet to enable SSR and prevent styles flickering on page load: https://github.com/zeit/next.js/blob/canary/examples/with-styled-components/pages/_document.js 2. To build a next.js app usin...
Alevardi
1

votes
1

answer
28

Views

Component not accepting camelCase names

My issue here lie with me trying to make a navbar component, some data must be shared from the main page to the component, and while spending a few hours researching into how to use components, i can find nowhere that can explain why i cant use camelCase variable names to bind data. Can anyone point...
Tom Edwards
1

votes
2

answer
30

Views

Passing props values to component

I have this component: InputField.vue export default { props: { label: { type: String, required: true, default: 'label', /*
1

votes
1

answer
27

Views

svg spinner created with styled components sharing same color

I'm playing around with styled-components and trying to create a svg circle spinner component. Everything is great except when I try to use the component multiple times in same page then every component is using the same strokeColor from the last one. The other props strokeWidth is working fine thou...
Tushar Khatiwada
0

votes
0

answer
5

Views

Selecting a className from another component in React

I'm trying to toggle a className from another component with React but can only access the 'root' id and not others components className. import React, { Component } from 'react'; import Switch from 'react-switch'; import '../css/index.css'; import '../css/Header.css'; class SwitchExample extends Co...
Yann
1

votes
2

answer
543

Views

How to select dom element in a loop in angular 5

I am a newbie in angular and just learning it day by day. I am making a crud in angular 5 and it is going good. I am just stuck in a little problem which I can solve using jquery but I want to solve it in angular way. This is my crud The input box is disabled by default what i want is that when I c...
dev
1

votes
4

answer
2.9k

Views

Angular 2 - NgFor not updating view

I am working on angular 2 project and I am having an issue when I am trying to change the list . NgFor not recognizing the changes , and displaying only the list loaded at first time . here is an example code when I am loading all list and imminently after loading I reset it with null . the view sti...
Aviv Eyal
1

votes
2

answer
1k

Views

Error inflating class com.google.android.material.bottomnavigation.BottomNavigationView

I'm trying to add BottomNavigationView to my layout with this library: implementation 'com.google.android.material:material:1.0.0' This is my layout: It runs on my emulator but when I want to launch app on my real device it gives me this error: java.lang.RuntimeException: Unable to start activity Co...
Saman Sattari
1

votes
2

answer
53

Views

emberjs component communication

I have some trouble with component communication. Lets say I have 3 nested components. Parent {{component-a}} -> which has child {{component-b}} -> which has child {{component-c}}. How can I access component-c directly from component-a, if component-c is not rendered. Is this even possible. Thank y...
coldfusion
1

votes
2

answer
35

Views

React - How to change the props of a child component when an event happens?

I have a component called Nav. I want send props to another component called Body when the user use types in a search bar. The issue I'm having is that the value in the Body component does not change when I type in the search bar. The Nav class: constructor(props) { super(props); this.state = { id:...
canemarcovaro
1

votes
2

answer
59

Views

Update view on ngOnChanges from @Input in Angular

I have a @Input property in my child component of type Person and I'm passing the object from the parent component through an attribute Full working code is available in StackBlitz I explored the following question I got the point that what they told in the answer but I tried the Object.assign and...
B.Balamanigandan
1

votes
1

answer
22

Views

Ember init failing to recognize _super

So my app has this component.js: import Component from '@ember/component'; import layout from './template'; export default class MyComponent extends Component { layout = layout; init() { this._super(...arguments); } } When the component is rendered I am getting this error in the chrome console: Asse...
The E
1

votes
3

answer
84

Views

Display data in a different angular component

Could someone please give me a working example (or refer me to one) which illustrates this functionality in Angular: Component A: gets data from a server (A user enters a word in an input field, the server responds with some definition) Component B: the data received from the server will be displaye...
omar
0

votes
0

answer
5

Views

Problem when removing nodes (but keeping graph strongly connected)

I'm trying to simulate a rectangular room with some rectilinear obstacles within it, and so I formulated the problem as a graph in networkx. To add the obstacles, I'll choose nodes and then delete all of its edges. In order to prevent the graph from partitioning, this is the code I used self.G = nx...
JaP
1

votes
1

answer
769

Views

How to push one array to another during subscribe Angular 2

How to pass value of array to another empty array during subscribe in Angular 2. I want to create infinite scroller in Angular 2. I have an array of 10 values. In infinite scroller, I want to repeat those 10 values again and again. Below is the code in the component: array =[]; eNews = []; getNewsLi...
asp
1

votes
1

answer
52

Views

HOC/Render-Call Back or Library function?

I'm working on a project where a prospect needs to be sent an email about a property they are interested in. There is a top level component that fetches the property information and prospect's contact info from the database and passes to its children. There are two components that share the same pro...
Shane Unger
1

votes
1

answer
1.1k

Views

Passing props to higher-order components

Lets say if we have the following HOC: const myHoc = someProps => ComposedComponent => { const propsToPass = { /* ...some calculations... */ }; return ; }; How would I pass a prop to ComposedComponent in myHoc outside of myHoc? Use case I am writing an app used with redux-orm. Naturally, I'd want t...
Liau Jian Jie
1

votes
1

answer
53

Views

AngularJS Component to Watch and Display Notification when UiRouter Route Changes

I have two components on my page: Navigation component and Form component. I want to notify the user if they navigate away from the page (via clicking on the Navigation component or pressing the browser 'back' button) if the form is dirty. I have already implemented the dirty checks, but I don't kno...
Jon
1

votes
0

answer
116

Views

Is there any package for atom which autocompletes custom components?

I installed lots of packages to atom including emmet,auto complete HTML,angular and typescript plugins. All standard angular tags gets loaded. But my custom component name don`t get loaded. Do we have a plugin for this ? This is my HTML file This is my component ts file
AMendis
1

votes
0

answer
30

Views

FireMonkey AbsoluteOpacity issue

I defined a component as tZText = class (tText) ... property Enabled : Boolean read GetEnabled write SetEnabled; ... procedure tZText.SetEnabled (const aEnabled: Boolean); begin inherited Enabled := aEnabled; case aEnabled of False : TextSettings.FontColor := fTextColors.TextColorDisabled; True...
user2383818
1

votes
2

answer
56

Views

Is there a way to to print the component raw code before rendered to the screen in Angular?

I am trying to build an angular UI component lib doc without using any third party document library like typedoc etc and found out it's hard to print out the raw component code example to screen, for example if I try: The will be rendered instead of showing the code. I generated an example here ht...
Yulu Zhang
1

votes
0

answer
415

Views

Angular Component view Inheritance

I'm using angular4 since few month now, and I'm trying to figure out, how can I build inheritance between component. So in my exemple I have two component ParentComponent and ChildComponent ParentComponent.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-parent', tem...
Nicolas Pretot
1

votes
1

answer
318

Views

How to programmatically close the Material-Ui DropDownMenu

http://www.material-ui.com/#/components/dropdown-menu Due to a styling issue I had to change the order of components inside of my material-ui DropdownMenu. However now some of the buttons (renderNavLink) do not close the Dropdown after being clicked. My render: render() { return ( {this.renderMenuIt...
Leon Gaban
1

votes
0

answer
35

Views

In angular2 service when value of service property changes - how corresponding component property reflects this change? Explain change detection

In angular2 service, when value of primitive properties of service change- corresponding component properties don't change where as if service has a user defined custom class as a property and if that changes - component reflects the change. Why, How change detection is working here? In my applicat...
Akriti Mahajan
1

votes
1

answer
358

Views

How to refresh component in reactnative using redux pattern?

I am using Redux pattern, I have problem in state management. Condition: When i successfully submitted form data from action.js with actonTypes.SUBMITSUCCESS. and i update view according to the status send from reducer.The problem is that when i press back from that component and again navigate to...
Youbaraj Poudel
1

votes
2

answer
217

Views

angular2 parent component reference in output

I am new to angular 2 and I have been trying to get the value of an attribute of a parent component called form the @output implementation of the parent. Here is the code ParentPage.ts export class ParentPage { name: string; constructor(){ this.name = 'john doe'; } handleChild(text){ console.log(th...
1

votes
0

answer
88

Views

Angular 1.6 Component' Template not updating under ng-repeat

The component is working perfectly fine when used individually. But If, used under ng-repeat, the DOM is not updated with fetched data .component('viewMore', { templateUrl: '../components/clientAllData/clientAllData.html', controller: viewMoreCtrl, controllerAs: 'vm', bindings: { icon: '
Somnath Pathak
1

votes
0

answer
583

Views

No provider for ngControl when transcluding an input to an NPM package's wrapper component with ReactiveForms

Sorry for the mouthful of a title. Here's the error that I'm running into: MyComponent.html:37 ERROR Error: StaticInjectorError[NgControl]: StaticInjectorError[NgControl]: NullInjectorError: No provider for NgControl! at _NullInjector.get (core.js:993) at resolveToken (core.js:1281) at tryResolveT...
Agent 404
1

votes
1

answer
1.7k

Views

Android Studio does not download the SDK. same zip file repeated in details

I installed from https://dl.google.com/dl/android/studio/install/3.0.1.0/android-studio-ide-171.4443003-windows.exe All seemed well until setup tries to download Components. Expanding the detail shows these lines repeated infinitely. https://dl.google.com/android/repository/android_m2repository_r47...
cando
1

votes
0

answer
236

Views

Angular2 IE11 & Safari ng-if and routing issue

I have added polyfills: and uncomment all polyfills in polyfills.ts 1) When move to another page - old components still live below the page 2) Even components with ngIf - once appeared - still live on the page UPD: Similar issue for Safari & IE, rest of browsers works good
Serhio g. Lazin
1

votes
0

answer
274

Views

Override Vuejs component from included component in my app

I am working on a Vuejs app that incorporates Vue Bootstrap Calendar. I really only need the calendar structure without events, and so I want to be able to override the contents of each day cell and put in my own custom content. I was able to do this successfully with Angularjs using Angular Bootstr...
wonder95
1

votes
1

answer
609

Views

Redirect Vue-Router on error in props function

I have this route definition: {name: 'article', path: '/article/:id', component: Article, props: true} And this component (I use Typescript and vue-class-component): @Component({ props: { id: Number } }) class Article extends Vue { id: Number; } Of course, this give me this warn [Vue warn]: Invali...
Varkal
1

votes
0

answer
337

Views

View not updating after first time triggering LiveData when using background job in Android

I'm building a debt application in Android using Dagger 2, Room and MVVM. My problem lies with the reactivity of my main view, where a list of debts are shown and you can tick them off. When this activity is launched all the debts are loaded correctly, however when I insert a new debt the view is no...
César Alberca
1

votes
0

answer
223

Views

Set default “to date” in ng2 datetime “from to datepicker”

Update: If I remove giving datepicker options from html, it works but I want to set default options like autoclose and all. I am using https://nkalinov.github.io/ng2-datetime/ for a 'from to' datepicker. I am able to set default date for the from datepicker whereas the to datepicker shows choose dat...
RemyaJ
1

votes
1

answer
779

Views

Work-around for Styled-component not working on Internet Explorer 11

I have styled-components on my web-app. They work great. Except on Internet Explorer 11. They completely break and the layout is just a pile of components laying there horizontally instead of the flexbox and whatnot. What is the usual way to work around this problem? Should I somehow recognize in th...
Steve Waters

View additional questions