angulardart / angular_components Goto Github PK
View Code? Open in Web Editor NEWThe official Material Design components for AngularDart. Used at Google in production apps.
Home Page: https://pub.dev/packages/angular_components
The official Material Design components for AngularDart. Used at Google in production apps.
Home Page: https://pub.dev/packages/angular_components
Inside a material-tab-panel I have the following:
<material-tab *ngFor="let tab of tabs" [label]="tab.title"></material-tab>
In other code, I am able to update the tab.title, but do not see results in browser.
I am able to see results in browser for <div *ngFor="let tab of tabs">{{tab.title}}
I try to let the user only input a number in a material-input and therefore set the type accordingly.
In the source of the material-input is stated:
/// - errorMsg
-- The error msg to be shown on the input if the max characters
/// are hit or the msg for an invalid number in the case of type = "number"
But no error is shown on invalid user input?
angular/angular#2869 is fixed
A value of null
causes the attribute to be removed.
The class docs for the Glyph component say to include the following link at the top of the page.
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/icon?family=Material+Icons+Extended">
However, none of the icons show up using this link. The example code uses this link instead:
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
which works properly.
I think this is because the Glyph component adds the .material-icons
class to a tag, but that class is called .material-icons-extended
in the extended stylesheet.
The docs should be changed to reflect this, and I guess the extended set of icons should be supported eventually.
i'm setting up a showcase page based on the project showcase. I defined a simple custom card component, but adding a material-ripple to it, it takes the entire visibile content above the fold (if the page is scrollable, the ripple doesn't extend to the part below the fold).
this is a screenshot while clicking on the page lower right:
<div class="simple-card">
<img class="simple-card__image"
[src]="imageUrl"/>
<p class="simple-card__text">
{{text}}
</p>
<material-ripple></material-ripple>
</div>
.simple-card {
display: flex;
align-items: center;
height: 56px;
min-width: 288px;
max-width: 368px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
import 'package:angular2/core.dart';
import 'package:angular2_components/angular2_components.dart';
@Component(
selector: 'qui-simple-card',
styleUrls: const ['qui_simple_card.css'],
templateUrl: 'qui_simple_card.html',
directives: const [
materialDirectives,
materialInputDirectives
],
providers: const [materialProviders])
class QuiSimpleCardComponent {
@Input('img-src')
String imageUrl;
@Input()
String text;
}
I expected the ripple to be confined inside my card borders. Am I doing something wrong or is this a bug?
using latest dart 1.20.1 and angular2 2.0
It would be great to have an optional scroll shield, because when i use a modal i doesn't want to allow the user to scroll the background.
When using a flex layout the popup appears off screen/behind the screen making a x-scrollbar appear in the process. You can see scrollbar appear on the body in the screen shots.
Also there is currently no way that I can see to force the top right alignment. This type of option would also alleviate this issue.
Angular components can be tested?
I'm looking for some way to test components.
When ViewEncapsulation.Native is used the fonts don't render. You have to include the glyph icons import / css on every component where you want to use the icon.
Can the components be constructed so they always work correctly regardless of the encapsulation method used?
Note: I'm using Polymer for the main layout components and trying to use angular2_components for everything else where possible.
The problem is rather simple, see the template below:
<material-tab-panel>
<material-tab label="test">
<material-expansionpanel-set>
<material-expansionpanel name="panel 1">
Test 1
</material-expansionpanel>
<material-expansionpanel name="panel 2">
Test 2
</material-expansionpanel>
</material-expansionpanel-set>
</material-tab>
</material-tab-panel>
The Dartium browser renders nothing. If I remove the surrounding material-tab-panel and material-tab the expansion-panels are rendered with the expected accordion behavior. In reverse without the expensionpanel-set the tab is rendered correctly. It seems that the combination causes the problem. Compiling to JavaScript does not change this outcome.
The simple app from this repo runs as expected initially and displays this radio group with the currentHero
selected:
This is an excerpt from the template used to generate the view:
<material-radio-group [(ngModel)]="currentHero">
<material-radio *ngFor="let h of heroes" [value]="h">
{{h.name}} ({{h.id}})
</material-radio>
</material-radio-group>
But if you click "Reset Heroes", the current hero is no longer selected in the radio group:
The reset action code is:
void resetHeroes() {
heroes = Hero.mockHeroes.map((hero) => new Hero.copy(hero)).toList();
currentHero = heroes[0];
}
The full source for this demo (generated from a stagehand Angular web app base), is here.
This app uses 3.0.0-alpha+1
version of Angular and the latest ACX.
This issue was originally discovered while working on the AngularDart 3.x sample for the Template Syntax page.
Is there a way to put a material-input next to a material-button and let the input use up all available space horizontally? Something like flex-grow or similar?
I actually built one last night out of necessity (using these components in a project), and once I get home, I'll upload it to Github and share the link here.
Feel free to include it in this package. It's more or less a port of the Polymer paper-toolbar.
Hi. Upon upgrading from Angular 2.1.1 to Angular 2.2.0, my project instantly broke. Here is the otuput from attempting to load the angular2
transformer:
[Error from DirectiveMetadataLinker on angular2_components|lib/src/components/material_radio/material_radio.ng_summary.json with input angular2_components|lib/src/components/material_radio/material_radio.ng_meta.json]:
Missing identifier "MaterialRadioGroupComponent" needed by "MaterialRadioComponent" from metadata map
[Error from DirectiveMetadataLinker on angular2_components|lib/angular2_components.ng_summary.json with input angular2_components|lib/angular2_components.ng_meta.json]:
Missing identifier "MaterialExpansionPanelSet" needed by "root" from metadata map
[Error from DirectiveMetadataLinker on angular2_components|lib/angular2_components.ng_summary.json with input angular2_components|lib/angular2_components.ng_meta.json]:
Missing identifier "MaterialRadioGroupComponent" needed by "root" from metadata map
[Error from DirectiveMetadataLinker on angular2_components|lib/angular2_components.ng_summary.json with input angular2_components|lib/angular2_components.ng_meta.json]:
Missing identifier "ReorderItemDirective" needed by "root" from metadata map
[Error from DirectiveMetadataLinker on angular2_components|lib/angular2_components.ng_summary.json with input angular2_components|lib/angular2_components.ng_meta.json]:
Missing identifier "ReorderListComponent" needed by "root" from metadata map
Multiple errors occurred:
- Transform DirectiveProcessor on angular2_components|lib/src/components/material_expansionpanel/material_expansionpanel_set.dart threw error: Queries inside constructors are deprecated, please replace with query annotations on fields in class MaterialExpansionPanelSet
package:angular2/src/transform/common/type_metadata_reader.dart 1280:3 _reportDeprecation
package:angular2/src/transform/common/type_metadata_reader.dart 1256:7 _getCompileDiDependencyMetadata.<fn>
dart:_internal/iterable.dart 416 MappedListIterable.elementAt
dart:_internal/iterable.dart 222 ListIterable.toList
package:angular2/src/transform/common/type_metadata_reader.dart 1270:6 _getCompileDiDependencyMetadata
package:angular2/src/transform/common/type_metadata_reader.dart 229:13 _CompileTypeMetadataVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:angular2/src/transform/common/type_metadata_reader.dart 673:10 _DirectiveMetadataVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:angular2/src/transform/common/type_metadata_reader.dart 72:10 TypeMetadataReader.readTypeMetadata
package:angular2/src/transform/directive_processor/rewriter.dart 98:10 _NgMetaVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:analyzer/src/dart/ast/ast.dart 7688:20 NodeListImpl.accept
package:angular2/src/transform/directive_processor/rewriter.dart 92:30 _NgMetaVisitor.visitCompilationUnit
package:analyzer/src/dart/ast/ast.dart 2439:15 CompilationUnitImpl.accept
package:angular2/src/transform/directive_processor/rewriter.dart 52:16 createNgMeta.<async>.<fn>.<async>
dart:async/future.dart 144 Future.Future.microtask.<fn>
dart:async/zone.dart 1150 _rootRun
dart:async/zone.dart 1026 _CustomZone.run
dart:async/zone.dart 953 _CustomZone.bindCallback.<fn>
dart:async/schedule_microtask.dart 41 _microtaskLoop
dart:async/schedule_microtask.dart 50 _startMicrotaskLoop
dart:isolate-patch/isolate_patch.dart 96 _runPendingImmediateCallback
dart:isolate-patch/isolate_patch.dart 149 _RawReceivePortImpl._handleMessage
package:angular2/src/transform/common/type_metadata_reader.dart 1280:3 _reportDeprecation
package:angular2/src/transform/common/type_metadata_reader.dart 1256:7 _getCompileDiDependencyMetadata.<fn>
dart:_internal ListIterable.toList
package:angular2/src/transform/common/type_metadata_reader.dart 1270:6 _getCompileDiDependencyMetadata
package:angular2/src/transform/common/type_metadata_reader.dart 229:13 _CompileTypeMetadataVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:angular2/src/transform/common/type_metadata_reader.dart 673:10 _DirectiveMetadataVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:angular2/src/transform/common/type_metadata_reader.dart 72:10 TypeMetadataReader.readTypeMetadata
package:angular2/src/transform/directive_processor/rewriter.dart 98:10 _NgMetaVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:analyzer/src/dart/ast/ast.dart 7688:20 NodeListImpl.accept
package:angular2/src/transform/directive_processor/rewriter.dart 92:30 _NgMetaVisitor.visitCompilationUnit
package:analyzer/src/dart/ast/ast.dart 2439:15 CompilationUnitImpl.accept
package:angular2/src/transform/directive_processor/rewriter.dart 52:16 createNgMeta.<async>.<fn>.<async>
- Transform DirectiveProcessor on angular2_components|lib/src/components/material_radio/material_radio_group.dart threw error: Queries inside constructors are deprecated, please replace with query annotations on fields in class MaterialRadioGroupComponent
package:angular2/src/transform/common/type_metadata_reader.dart 1280:3 _reportDeprecation
package:angular2/src/transform/common/type_metadata_reader.dart 1256:7 _getCompileDiDependencyMetadata.<fn>
dart:_internal/iterable.dart 416 MappedListIterable.elementAt
dart:_internal/iterable.dart 222 ListIterable.toList
package:angular2/src/transform/common/type_metadata_reader.dart 1270:6 _getCompileDiDependencyMetadata
package:angular2/src/transform/common/type_metadata_reader.dart 229:13 _CompileTypeMetadataVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:angular2/src/transform/common/type_metadata_reader.dart 673:10 _DirectiveMetadataVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:angular2/src/transform/common/type_metadata_reader.dart 72:10 TypeMetadataReader.readTypeMetadata
package:angular2/src/transform/directive_processor/rewriter.dart 98:10 _NgMetaVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:analyzer/src/dart/ast/ast.dart 7688:20 NodeListImpl.accept
package:angular2/src/transform/directive_processor/rewriter.dart 92:30 _NgMetaVisitor.visitCompilationUnit
package:analyzer/src/dart/ast/ast.dart 2439:15 CompilationUnitImpl.accept
package:angular2/src/transform/directive_processor/rewriter.dart 52:16 createNgMeta.<async>.<fn>.<async>
dart:async/future.dart 144 Future.Future.microtask.<fn>
dart:async/zone.dart 1150 _rootRun
dart:async/zone.dart 1026 _CustomZone.run
dart:async/zone.dart 953 _CustomZone.bindCallback.<fn>
dart:async/schedule_microtask.dart 41 _microtaskLoop
dart:async/schedule_microtask.dart 50 _startMicrotaskLoop
dart:isolate-patch/isolate_patch.dart 96 _runPendingImmediateCallback
dart:isolate-patch/isolate_patch.dart 149 _RawReceivePortImpl._handleMessage
package:angular2/src/transform/common/type_metadata_reader.dart 1280:3 _reportDeprecation
package:angular2/src/transform/common/type_metadata_reader.dart 1256:7 _getCompileDiDependencyMetadata.<fn>
dart:_internal ListIterable.toList
package:angular2/src/transform/common/type_metadata_reader.dart 1270:6 _getCompileDiDependencyMetadata
package:angular2/src/transform/common/type_metadata_reader.dart 229:13 _CompileTypeMetadataVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:angular2/src/transform/common/type_metadata_reader.dart 673:10 _DirectiveMetadataVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:angular2/src/transform/common/type_metadata_reader.dart 72:10 TypeMetadataReader.readTypeMetadata
package:angular2/src/transform/directive_processor/rewriter.dart 98:10 _NgMetaVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:analyzer/src/dart/ast/ast.dart 7688:20 NodeListImpl.accept
package:angular2/src/transform/directive_processor/rewriter.dart 92:30 _NgMetaVisitor.visitCompilationUnit
package:analyzer/src/dart/ast/ast.dart 2439:15 CompilationUnitImpl.accept
package:angular2/src/transform/directive_processor/rewriter.dart 52:16 createNgMeta.<async>.<fn>.<async>
- Transform DirectiveProcessor on angular2_components|lib/src/components/reorder_list/reorder_list.dart threw error: Queries inside constructors are deprecated, please replace with query annotations on fields in class ReorderListComponent
package:angular2/src/transform/common/type_metadata_reader.dart 1280:3 _reportDeprecation
package:angular2/src/transform/common/type_metadata_reader.dart 1256:7 _getCompileDiDependencyMetadata.<fn>
dart:_internal/iterable.dart 416 MappedListIterable.elementAt
dart:_internal/iterable.dart 222 ListIterable.toList
package:angular2/src/transform/common/type_metadata_reader.dart 1270:6 _getCompileDiDependencyMetadata
package:angular2/src/transform/common/type_metadata_reader.dart 229:13 _CompileTypeMetadataVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:angular2/src/transform/common/type_metadata_reader.dart 673:10 _DirectiveMetadataVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:angular2/src/transform/common/type_metadata_reader.dart 72:10 TypeMetadataReader.readTypeMetadata
package:angular2/src/transform/directive_processor/rewriter.dart 98:10 _NgMetaVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:analyzer/src/dart/ast/ast.dart 7688:20 NodeListImpl.accept
package:angular2/src/transform/directive_processor/rewriter.dart 92:30 _NgMetaVisitor.visitCompilationUnit
package:analyzer/src/dart/ast/ast.dart 2439:15 CompilationUnitImpl.accept
package:angular2/src/transform/directive_processor/rewriter.dart 52:16 createNgMeta.<async>.<fn>.<async>
dart:async/future.dart 144 Future.Future.microtask.<fn>
dart:async/zone.dart 1150 _rootRun
dart:async/zone.dart 1026 _CustomZone.run
dart:async/zone.dart 953 _CustomZone.bindCallback.<fn>
dart:async/schedule_microtask.dart 41 _microtaskLoop
dart:async/schedule_microtask.dart 50 _startMicrotaskLoop
dart:isolate-patch/isolate_patch.dart 96 _runPendingImmediateCallback
dart:isolate-patch/isolate_patch.dart 149 _RawReceivePortImpl._handleMessage
package:angular2/src/transform/common/type_metadata_reader.dart 1280:3 _reportDeprecation
package:angular2/src/transform/common/type_metadata_reader.dart 1256:7 _getCompileDiDependencyMetadata.<fn>
dart:_internal ListIterable.toList
package:angular2/src/transform/common/type_metadata_reader.dart 1270:6 _getCompileDiDependencyMetadata
package:angular2/src/transform/common/type_metadata_reader.dart 229:13 _CompileTypeMetadataVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:angular2/src/transform/common/type_metadata_reader.dart 673:10 _DirectiveMetadataVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:angular2/src/transform/common/type_metadata_reader.dart 72:10 TypeMetadataReader.readTypeMetadata
package:angular2/src/transform/directive_processor/rewriter.dart 98:10 _NgMetaVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:analyzer/src/dart/ast/ast.dart 7688:20 NodeListImpl.accept
package:angular2/src/transform/directive_processor/rewriter.dart 92:30 _NgMetaVisitor.visitCompilationUnit
package:analyzer/src/dart/ast/ast.dart 2439:15 CompilationUnitImpl.accept
package:angular2/src/transform/directive_processor/rewriter.dart 52:16 createNgMeta.<async>.<fn>.<async>
- Transform DirectiveProcessor on angular2_components|lib/src/components/scorecard/scoreboard.dart threw error: Queries inside constructors are deprecated, please replace with query annotations on fields in class ScoreboardComponent
package:angular2/src/transform/common/type_metadata_reader.dart 1280:3 _reportDeprecation
package:angular2/src/transform/common/type_metadata_reader.dart 1256:7 _getCompileDiDependencyMetadata.<fn>
dart:_internal/iterable.dart 416 MappedListIterable.elementAt
dart:_internal/iterable.dart 222 ListIterable.toList
package:angular2/src/transform/common/type_metadata_reader.dart 1270:6 _getCompileDiDependencyMetadata
package:angular2/src/transform/common/type_metadata_reader.dart 229:13 _CompileTypeMetadataVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:angular2/src/transform/common/type_metadata_reader.dart 673:10 _DirectiveMetadataVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:angular2/src/transform/common/type_metadata_reader.dart 72:10 TypeMetadataReader.readTypeMetadata
package:angular2/src/transform/directive_processor/rewriter.dart 98:10 _NgMetaVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:analyzer/src/dart/ast/ast.dart 7688:20 NodeListImpl.accept
package:angular2/src/transform/directive_processor/rewriter.dart 92:30 _NgMetaVisitor.visitCompilationUnit
package:analyzer/src/dart/ast/ast.dart 2439:15 CompilationUnitImpl.accept
package:angular2/src/transform/directive_processor/rewriter.dart 52:16 createNgMeta.<async>.<fn>.<async>
dart:async/future.dart 144 Future.Future.microtask.<fn>
dart:async/zone.dart 1150 _rootRun
dart:async/zone.dart 1026 _CustomZone.run
dart:async/zone.dart 953 _CustomZone.bindCallback.<fn>
dart:async/schedule_microtask.dart 41 _microtaskLoop
dart:async/schedule_microtask.dart 50 _startMicrotaskLoop
dart:isolate-patch/isolate_patch.dart 96 _runPendingImmediateCallback
dart:isolate-patch/isolate_patch.dart 149 _RawReceivePortImpl._handleMessage
package:angular2/src/transform/common/type_metadata_reader.dart 1280:3 _reportDeprecation
package:angular2/src/transform/common/type_metadata_reader.dart 1256:7 _getCompileDiDependencyMetadata.<fn>
dart:_internal ListIterable.toList
package:angular2/src/transform/common/type_metadata_reader.dart 1270:6 _getCompileDiDependencyMetadata
package:angular2/src/transform/common/type_metadata_reader.dart 229:13 _CompileTypeMetadataVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:angular2/src/transform/common/type_metadata_reader.dart 673:10 _DirectiveMetadataVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:angular2/src/transform/common/type_metadata_reader.dart 72:10 TypeMetadataReader.readTypeMetadata
package:angular2/src/transform/directive_processor/rewriter.dart 98:10 _NgMetaVisitor.visitClassDeclaration
package:analyzer/src/dart/ast/ast.dart 1847:15 ClassDeclarationImpl.accept
package:analyzer/src/dart/ast/ast.dart 7688:20 NodeListImpl.accept
package:angular2/src/transform/directive_processor/rewriter.dart 92:30 _NgMetaVisitor.visitCompilationUnit
package:analyzer/src/dart/ast/ast.dart 2439:15 CompilationUnitImpl.accept
package:angular2/src/transform/directive_processor/rewriter.dart 52:16 createNgMeta.<async>.<fn>.<async>
- Transform DirectiveMetadataLinker on angular2_components|lib/src/components/material_radio/material_radio.ng_summary.json threw error: Missing identifier "MaterialRadioGroupComponent" needed by "MaterialRadioComponent" from metadata map
- Transform DirectiveMetadataLinker on angular2_components|lib/angular2_components.ng_summary.json threw error: Missing identifier "MaterialExpansionPanelSet" needed by "root" from metadata map
- Transform DirectiveMetadataLinker on angular2_components|lib/angular2_components.ng_summary.json threw error: Missing identifier "MaterialRadioGroupComponent" needed by "root" from metadata map
- Transform DirectiveMetadataLinker on angular2_components|lib/angular2_components.ng_summary.json threw error: Missing identifier "ReorderItemDirective" needed by "root" from metadata map
- Transform DirectiveMetadataLinker on angular2_components|lib/angular2_components.ng_summary.json threw error: Missing identifier "ReorderListComponent" needed by "root" from metadata map
dart:isolate _RawReceivePortImpl._handleMessage
This is an edge case and I am not sure where to log it.
The sample page (https://dart-lang.github.io/angular2_components_example/) has glyphs fetched from font.googleapis.com. These glyphs are not displayed when the disconnect.me strict protection mode is enabled in Firefox.
OS - Ubuntu 16.04.1
Browser - Firefox 49.0
Steps to reproduce -
Is it currently possible to change what colors are using for the material elements?
When adding a material-input to a form with the required attribute set, it will be marked as invalid immediately as soon as the page loads, is there any way to test/mark the invalid state of the component only after the user has interacted with it?
I could not find any way to make a material-input field readonly.
Am I wrong?
Hello,
I've followed all the example but with the latest Dart/Angular2/angular2_components.
Everything works except for the last step when the divs are replaced by "material-tab".
To be sure that I made no mistake I replaced the code by the "step-4" from github and it still doesn't work.
I managed to run the "component example" page with the same versions, and the tabs are ok, so there must just be something missing in the demo.
Steps to reproduce:
git clone https://github.com/dart-lang/one-hour-codelab.githttps://github.com/dart-lang/one-hour-codelab.git
cd one-hour-codelab\angular2_components\4-final\
pub get
pub deps
pub serve
Here everything is working :)
vi pubspec.yaml
pub get
Resolving dependencies...
> angular2 2.2.0 (was 2.1.1)
> angular2_components 0.2.2 (was 0.2.0)
Changed 2 dependencies!
pub deps
pub serve
Here it doesn't work...
The Polymer project implements a whole range of Material components. These are supposed to be usable from any framework and there is even a PolymerDart implementation of (most of?) them.
It is not clear to the user (incl. me) what the added value is of using these components over the ones of the Polymer project.
I think it would be helpful to have a small explanatory section on this in the README.
Currently the file
cannot be passed as a type
to the MaterialInput
component.
In Example Gallery, "Reorder List" sample, reordering items on Android Chrome just make items disappear.
If you tap and hold an item, the item will simply disappear (after the haptic feedback)
Os Android 6.0.1
Chrome 54.0.2840.85
Hello, would it be possible to make the intl package optional or decrease its size?
It takes around 400kb and as far as I have seen it is only used to get localization for default texts and messages.
I guess there is no way to use tree-shaking to reduce the size?
Can't start using because of exception trown in pub serve
mode:
ORIGINAL EXCEPTION: No top-level method '_url' declared.
NoSuchMethodError: method not found: '_url'
Receiver: top-level
Arguments: [...](anonymous function) @ VM9598:1
ORIGINAL STACKTRACE:(anonymous function) @ VM9598:1
#0 NoSuchMethodError._throwNew (dart:core-patch/errors_patch.dart:184)
#1 _url (package:angular2_components/src/framework_stabilizers/testability.dart:18:25)
#2 testabilitiesEnabled (package:angular2_components/src/framework_stabilizers/testability.dart:21:35)
#3 testabilitiesEnabled (package:angular2_components/src/framework_stabilizers/testability.dart:21:12)
...
in release mode after 'pub build' seems started properly.
Layout components are super helpful and are the building block of your app layout. Many material design component libraries provide these layout components out of the box.
Eg: Material Design Lite (https://getmdl.io/components/index.html#layout-section)
Does it make sense to provide these as dart angular2 components?
Here is a sample of what i try to do everything work except one thing.
The PageLoaderElement
type
method doesn't work on the material-input component.
The value of username
and password
are not modified.
Do you have any idea why this doesn't work ?
me and few others use this to do drag and drop with Dart apps.
https://github.com/marcojakob/dart-dnd
But we are wondering if you already support it, or are planning to support Drag and Drop in this library anyway ?
marcojakob/dart-dnd#16
It will help us to know the best roadmap for the library.
Say I have a form:
<form (submit)="handleSubmit()">
<material-input floatingLabel label="Username" [(ngModel)]="username"></material-input>
<material-button (click)="handleSubmit()" raised>Submit</material-button>
</form>
It is impossible for me automatically submit the form when the user presses enter inside the textbox. It would be great if there were an EventEmitter such as:
<material-input onKeyDown="handleKeyDown($event)"></material-input>
Apparently there is an error in this line.
I am attempting to use a GlyphComponent
, and here is dartjs's output:
Loading source assets...
Loading angel_configuration, dart_to_js_script_rewriter and angular2/transform/codegen transformers...
Loading angular2 transformers...
Building angel...
[Info from Dart2JS]:
Compiling angel|web/main.dart...
[Error from Dart2JS on angel|web/main.dart]:
packages/angular2_components/src/utils/browser/dom_service/angular_2.dart:11:1:
Can't read 'package:angular2/src/platform/dom/dom_renderer.dart' (Could not find asset angular2|lib/src/platform/dom/dom_renderer.dart.).
import 'package:angular2/src/platform/dom/dom_renderer.dart'
show DomRootRenderer;
[Warning from Dart2JS]:
web/main.dart:1:78:
Library 'package:angular2/platform/browser_static.dart' doesn't export a 'initReflector' declaration.
Try removing 'initReflector' from the 'show' clause.
import 'package:angular2/platform/browser_static.dart' show bootstrapStatic, initReflector;import 'main.template.dart' as ngStaticInit;
^^^^^^^^^^^^^
[Warning from Dart2JS on angel|web/main.dart]:
packages/angular2_components/src/utils/browser/dom_service/angular_2.dart:12:10:
Library 'package:angular2/src/platform/dom/dom_renderer.dart' doesn't export a 'DomRootRenderer' declaration.
Try removing 'DomRootRenderer' from the 'show' clause.
show DomRootRenderer;
^^^^^^^^^^^^^^^
[Warning from Dart2JS on angel|web/main.dart]:
packages/angular2_components/src/utils/browser/dom_service/angular_2.template.dart:31:67:
Library 'package:angular2/src/platform/dom/dom_renderer.dart' doesn't export a 'DomRootRenderer' declaration.
Try removing 'DomRootRenderer' from the 'show' clause.
export 'package:angular2/src/platform/dom/dom_renderer.dart' show DomRootRenderer;
^^^^^^^^^^^^^^^
[Warning from Dart2JS on angel|web/main.dart]:
packages/angular2_components/src/utils/browser/dom_service/angular_2.dart:20:10:
Library 'package:angular2/src/platform/dom/dom_renderer.dart' doesn't export a 'DomRootRenderer' declaration.
Try removing 'DomRootRenderer' from the 'show' clause.
show DomRootRenderer;
^^^^^^^^^^^^^^^
[Warning from Dart2JS on angel|web/main.dart]:
packages/angular2_components/src/utils/browser/dom_service/angular_2.template.dart:19:67:
Library 'package:angular2/src/platform/dom/dom_renderer.dart' doesn't export a 'DomRootRenderer' declaration.
Try removing 'DomRootRenderer' from the 'show' clause.
import 'package:angular2/src/platform/dom/dom_renderer.dart' show DomRootRenderer;
^^^^^^^^^^^^^^^
[Error from Dart2JS on angel|web/main.dart]:
packages/angular2_components/src/components/focus/keyboard_only_focus_indicator.template.dart:27:53:
Not a compile-time constant.
const [const <dynamic>[ElementRef], const <dynamic>[Renderer], const <dynamic>[DomService]],
^^^^^^^^
[Error from Dart2JS on angel|web/main.dart]:
packages/angular2_components/src/components/focus/keyboard_only_focus_indicator.template.dart:27:53:
Not a compile-time constant.
const [const <dynamic>[ElementRef], const <dynamic>[Renderer], const <dynamic>[DomService]],
^^^^^^^^
[Error from Dart2JS on angel|web/main.dart]:
packages/angular2_components/src/components/focus/keyboard_only_focus_indicator.template.dart:27:53:
Not a compile-time constant.
const [const <dynamic>[ElementRef], const <dynamic>[Renderer], const <dynamic>[DomService]],
^^^^^^^^
[Error from Dart2JS on angel|web/main.dart]:
packages/angular2_components/src/components/focus/keyboard_only_focus_indicator.template.dart:27:53:
Not a compile-time constant.
const [const <dynamic>[ElementRef], const <dynamic>[Renderer], const <dynamic>[DomService]],
^^^^^^^^
[Dart2JS on angel|web/main.dart]:
10 warning(s) and 1 hint(s) suppressed in package:angular2_components.
[Info from Dart2JS]:
Took 0:00:13.267029 to compile angel|web/main.dart.
Build failed.
Not sure why this would occur. If you need any more information about the error, let me know, and I will provide it. :)
When use an icon button i have problems styling. I got a 50x50px material button but the glyph icon doesn't center inside. It generates a div ng-content not centered. Also i want to ask if is possible a rectangular icon button instead of using the glyph ripple effect.
It would be great to get the ability to control a material tabs height. Making it take up the remaining height in the material-tab-panel.
Glyph component doesn't show the icon, just the title of it.
No way to see some examples of use or some documentation to start with the component.
Hello,
I can't get the example from https://www.dartdocs.org/documentation/angular2_components/0.1.1/angular2_components/MaterialInputComponent-class.html to work:
<material-input [(inputText)]="text">
Basically, there is no way how to set the value of the input. Am I missing something obvious?
Thanks
We have API changes and deprecations in 2.2.0 that could affect components.
Is the a way to implement de touch glyph button inside an input.
For example a glyph button to show the password content.
The Color class implements equals operator (==) but not hashCode
The problem is that the isExpanded setter requires a bool input, but a String value is passed in instead, therefore it is always went to the else clause.
@Input('expanded')
set isExpanded(bool value) {
if (value == _isExpanded) return;
if (value) {
expand(byUserAction: false);
} else {
collapse(byUserAction: false);
}
}
In the following function, the ctx.expanded is true (bool), but import11.interpolate0(ctx.expanded)
returns a string value "true"
.
void detectChangesInternal() {
bool changed = true;
dbg(0,0,2);
changed = false;
dbg(0,1,27);
final currVal_0 = import11.interpolate0(ctx.expanded);
if (import11.checkBinding(_expr_0,currVal_0)) {
_MaterialExpansionPanel_0_4.isExpanded = currVal_0;
changed = true;
_expr_0 = currVal_0;
}
dbg(0,0,59);
final currVal_1 = 'Algo Server Debug';
if (import11.checkBinding(_expr_1,currVal_1)) {
_MaterialExpansionPanel_0_4.name = currVal_1;
changed = true;
_expr_1 = currVal_1;
}
dbg(0,1,51);
final currVal_2 = import11.interpolate0(false);
if (import11.checkBinding(_expr_2,currVal_2)) {
_MaterialExpansionPanel_0_4.showSaveCancel = currVal_2;
changed = true;
_expr_2 = currVal_2;
}
if (changed) { _appEl_0.componentView.markAsCheckOnce(); }
if ((identical(this.cdState, ChangeDetectorState.NeverChecked) && !import11.AppViewUtils.throwOnChanges)) { _MaterialExpansionPanel_0_4.ngOnInit(); }
this.detectContentChildrenChanges();
this.detectViewChildrenChanges();
}
dynamic interpolate0(dynamic p) {
if (p is SafeValue) return p;
return p == null ? '' : (p is String ? p : p.toString());
}
Why set isExpanded(bool value)
does not complain a wrong type is provided (in Dartium, it does not complain, seems wrong to me )?
Is it any roadmap about the elements that will be available and when. I saw in dart summit the ACX gallery with all elements. Any plans?
I'm using a material-input field inside a panel with a background color.
The whole material-input inherits the background color, but I'd like to assign the input element (not the underline below) a clearer color (not necessarily white) because it is a wide standard to have input fields with a light color background.
Anyway, I thing it could be useful to have the possibility to style the input element background and text colors.
Is there a way to do this that I couldn't figure out or shoudl this be considered a request?
When a button is disabled and the user moves the mouse over it the cursor changes to 'disabled' but if the user desides to click the button anyway a click event is generated.
To reproduce the issue:
<material-button (click)="clicked()" disabled>Disabled</material-button>
void clicked() {
print('clickety-click !!');
}
In IE Version 11.0.9600.18524
If I do the following:
https://dart-lang.github.io/angular2_components_example/
Open the "Modal Dialogs" "Basic no-frills dialogs" "Open Max Height" and then keep clicking "Add Some Text", eventually the footer moves below the display pane.
Material icons needs to import an external css inside the html. My question is if there is any way to include inside the css selector inside the component like this:
styleUrls: const ['app_component.css','https://fonts.googleapis.com/icon?family=Material+Icons'],
I added a button to my application
<material-button raised #dialog.show()>Show Dialog</material-button>
Now I get
Observatory listening at http://127.0.0.1:46411/
>EXCEPTION: Error in asset:angular2_components/lib/src/components/material_button/material_button.html:10:0
EXCEPTION: Error in asset:angular2_components/lib/src/components/material_button/material_button.html:10:0
ORIGINAL EXCEPTION: No provider for ManagedZone!
ORIGINAL STACKTRACE:
#0 _NullInjector.get (package:angular2/src/core/di/injector.dart:11:7)
#1 MapInjector.get (package:angular2/src/core/di/map_injector.dart:28:25)
#2 ReflectiveInjectorImpl._getByKeyDefault (package:angular2/src/core/di/reflective_injector.dart:804:18)
#3 ReflectiveInjectorImpl._getByKey (package:angular2/src/core/di/reflective_injector.dart:770:14)
#4 ReflectiveInjectorImpl.get (package:angular2/src/core/di/reflective_injector.dart:528:17)
#5 ElementInjector.get (package:angular2/src/core/linker/element_injector.dart:17:37)
#6 ElementInjector.get (package:angular2/src/core/linker/element_injector.dart:17:37)
#7 ViewMaterialButtonComponent0.createInternal (package:angular2_components/src/components/material_button/material_button.template.dart:99:166)
#8 AppView.createComp (package:angular2/src/core/linker/app_view.dart:159:12)
#9 DebugAppView.createComp (package:angular2/src/debug/debug_app_view.dart:63:30)
Original question by @dejan-marlovic
hi, can you please help me? I know that this is not the right place to ask for help about this but I could not find solution to this anywhere else
im trying to use:
<span tooltipTarget #ref="tooltipTarget">
Explicitly declare a tooltip component<material-tooltip-text [for]="ref">
Allows for formatted text.and I get an error:
Transform TemplateCompiler on tooltip|lib/app_component.ng_meta.json threw error: Template parse errors:
line 4, column 21 of AppComponent: ParseErrorLevel.FATAL: There is no directive with "exportAs" set to "tooltipTarget"
#ref="tooltipTarget"I can use other components fine
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.