Questions tagged [angular-components]

A component controls a patch of screen called a view. Component decorator allows you to mark a class as an Angular component and provide additional metadata that determines how the component should be processed, instantiated and used at run time.

Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.You can see more information on components here

2024 questions
39
votes
4 answers

"Edit / Delete" button for each row & header column is 'Action' in the md-table component

I am quite new in the angular 4 world and I'm trying to add "Edit / Delete" button for each row & header column is 'Action' in the md-table component in Angular Material design with Angular 4. how can I do this? customized header column & buttons…
34
votes
3 answers

Angular 2+/4/5/6/7: Smart, dumb and deeply nested component communication

NOTE: for simplicity consider the component depths as: - Smart (grand)parent level 0 - dumb child level 1 .... - dumb grandchild level 2 ....) There are various options and conditions on how smart/grand/parent/child components…
MoMo
  • 1,836
  • 1
  • 21
  • 38
32
votes
11 answers

Cannot read property 'viewContainerRef' of undefined

I am trying to display a dynamic component similar (not exact) to the example in angular docs. I have a dynamic directive with viewContainerRef @Directive({ selector: '[dynamicComponent]' }) export class DynamicComponentDirective { …
mperle
  • 3,342
  • 8
  • 20
  • 34
30
votes
1 answer

Passing HTML into my component

Consider the following component sidebar.component.html:
Limnic
  • 1,826
  • 1
  • 20
  • 45
28
votes
5 answers

Refactoring Angular components from many inputs/outputs to a single config object

My components often start out by having multiple @Input and @Output properties. As I add properties, it seems cleaner to switch to a single config object as input. For example, here's a component with multiple inputs and outputs: export class…
Frank Modica
  • 10,238
  • 3
  • 23
  • 39
28
votes
3 answers

Angular 4 ExpressionChangedAfterItHasBeenCheckedError

in ParentComponent => ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ''. Current value: '[object Object]'. at viewDebugError (vendor.bundle.js:8962) at…
Saurabh Kumar
  • 16,353
  • 49
  • 133
  • 212
27
votes
2 answers

Angular 4 call directive method from component

i'm trying to build a structural directive that will change the parent DOM structure either invoked by using its selector (static) or by calling its public method(dynamic). Using the directive selector in a html template works fine without any…
mperle
  • 3,342
  • 8
  • 20
  • 34
25
votes
3 answers

Custom component FormControl breaking if reinitializing FormGroup from parent

I got a problem when reinitializing formGroup from parent component that is used in my custom component. Error that i get is: There is no FormControl instance attached to form control element with name: 'selectedCompany' HTML:
Mario Petrovic
  • 7,500
  • 14
  • 42
  • 62
24
votes
4 answers

Communicating Events from Parent to Child in AngularJS Components

in the new project I'm working on I've started using the components instead of directives. however, I've encountered an issue where I cannot find a concrete standard way to do it. It's easy to notify an event from child to parent, you can find it on…
Luca Trazzi
  • 1,240
  • 1
  • 13
  • 30
22
votes
4 answers

Is there a way to lazy load components, not modules, in Angular?

Lazy loading is a commonly used technique. However, in Angular it seems that the granularity level of this technique stops at the module level. That means that you can have module main that loads in the browser, and then on special occasion…
21
votes
4 answers

Angular 2+: Get child element of @ViewChild()

How can I access the child elements (here: ) of @ViewChild() in Angular 2+ without explicit declaration? In template.html
In…
btx
  • 1,972
  • 3
  • 24
  • 36
21
votes
6 answers

How to reset only specific fields of form in angular 5

I have created a function in one of my component file that resets the form(myform): `onSubmit() { if (this.myform.valid) { console.log("Form Submitted!"); this.myform.reset(); } }` It works perfectly fine resetting the whole form, but…
Atul Stha
  • 1,404
  • 8
  • 23
  • 46
20
votes
5 answers

Vertical tabs with Angular Material

Using the proper Angular Material directive, how do I change the direction to vertical? Starting with vertical tabs: Then want to drop to content below mat-select dropdown: EDIT: Will be working on adapting https://stackoverflow.com/a/43389018…
A T
  • 13,008
  • 21
  • 97
  • 158
20
votes
9 answers

How disable all the dates before a particular date in angular?

I am building a component (html, css, spec.ts, ts) in angular in which I always want endDate > startDate. I have followed this link https://material.angular.io/components/datepicker/overview in order make multiple datepickers. Below is my HTML for…
john
  • 11,311
  • 40
  • 131
  • 251
20
votes
2 answers

Why does Angular 2 render app component template twice

I want to display common header and footer throughout my app. But when I try to do it, it gets displayed twice :- app.component.html
Header
Footer
app.component.ts import…
Stacy J
  • 2,721
  • 15
  • 58
  • 92