by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Jonathan Rezende
@jodinathan
@gmpassos google has a more advanced angular dart internally and, from what I've heard, they may update it to public once NNBD is out, but I am no insider or something like that
@alexflav23 maybe you could use a popover for that? shouldn't be hard to do
Flavian Alexandru
@alexflav23
is there a default component for it?
Jonathan Rezende
@jodinathan
maybe the tooltip is enough for a status message
@lobanovkirill maybe chartjs may help you?
there is a dart interface for that
Flavian Alexandru
@alexflav23
@jodinathan Thank you. I saw many components in angular-ui and others, but it seems they have been long abandoned.
Kirill
@lobanovkirill
@jodinathan thank you!)
@jodinathan no( it's not for my task(
Jonathan Rezende
@jodinathan
@alexflav23 angular_components work fine for me since 3 years a go, so I would say they are pretty much solid
Gani Georgiev
@ganigeorgiev
Contrary to @jodinathan, I wouldn't recommended using angular_components (at least in its current state). Our team has started with angular_components but later we found out that they are not just well put together and don't have the quality that you would expect from googlers. The package is outdated, some of the components feel overengineered and there are a lot of inconsistencies and differences between their usage as if different people were assigned for the task, but later they didn't have the time to polish it. Styling is another big issue - the provided mixins are very limited and most of them make excessive use of ::ng-deep that leаds to side effects in deeply nested components. If the scope of your project allows it, I'll recommend writing your own components (it took us about a month to write 25+ components from scratch).
Flavian Alexandru
@alexflav23
@jodinathan ```Error: A value of type 'Element' can't be assigned to a variable of type 'PopupSource'.
  • 'Element' is from 'dart:html'.
    ```
Wish I could say the same, I am new to the framework, but the development flow is largely an endless stream of errors and obsolete documentation.
Flavian Alexandru
@alexflav23
The docs and dev experience is sadly so painful I miss Google Closure.
Gani Georgiev
@ganigeorgiev

@alexflav23 It seems that you are providing an Element instance directly instead of PopupSource. Make sure that you have registered PopupSourceDirective in your component, and in the template you should have something like:

<button popupSource #source="popupSource">My button</button>

<material-popup [source]="source">...</material-popup>

The examples source code was usually my way to work with angular_components - https://github.com/dart-lang/angular_components/tree/3442ade7beb3fbc52e6169d19405a32fdeb5c5ea/examples/material_popup_example/lib

Flavian Alexandru
@alexflav23
@ganigeorgiev Good call, the error wasn’t obvious on this occassion.
Gani Georgiev
@ganigeorgiev

Has anyone succeeded updating the analyzer dependency for angular-6? I've tried with dependency_overrides:

dependency_overrides:
  analyzer: ^0.39.0

but this fails on webdev build with the following error:

[SEVERE] ../../../.pub-cache/hosted/pub.dartlang.org/angular-6.0.0-alpha+1/lib/src/compiler/analyzed_class.dart:64:15: Error: The method 'isEquivalentTo' isn't defined for the class 'DartType'. - 'DartType' is from 'package:analyzer/dart/element/type.dart' ('../../../.pub-cache/hosted/pub.dartlang.org/analyzer-0.39.8/lib/dart/element/type.dart').Try correcting the name to the name of an existing method, or defining a method named 'isEquivalentTo'.  return type.isEquivalentTo(string);
Unhandled exception:
Bad state: Unable to start build daemon.
#0      _handleDaemonStartup (package:build_daemon/client.dart:82:5)
<asynchronous suspension>
#1      BuildDaemonClient.connect (package:build_daemon/client.dart:183:11)
<asynchronous suspension>
#2      connectClient (package:webdev/src/daemon_client.dart:17:23)
#3      _startBuildDaemon (package:webdev/src/serve/dev_workflow.dart:26:18)
#4      DevWorkflow.start (package:webdev/src/serve/dev_workflow.dart:194:24)
#5      ServeCommand.run (package:webdev/src/command/serve_command.dart:101:27)
<asynchronous suspension>
#6      CommandRunner.runCommand (package:args/command_runner.dart:197:27)
#7      _CommandRunner.runCommand (package:webdev/src/webdev_command_runner.dart:38:24)
#8      CommandRunner.run.<anonymous closure> (package:args/command_runner.dart:112:25)
#9      new Future.sync (dart:async/future.dart:224:31)
Flavian Alexandru
@alexflav23
Is there material components support for navigation? Or one way to make menu item work with [routerLink] directives?
Gani Georgiev
@ganigeorgiev
@alexflav23 You could use MaterialListItemComponent and just add the [routerLink] directive without setting a (trigger). This is similar to the gallery example application - https://github.com/dart-lang/angular_components/blob/master/angular_gallery/lib/builder/template/gallery.html.mustache
Jonathan Rezende
@jodinathan
there are more components in pub
I think the name was skawa
Flavian Alexandru
@alexflav23
Is there a way to create a singleton component managing a popup? Trying to have some generic notification display for an app.
I am not sure if this is the right approach.
Jonathan Rezende
@jodinathan
that is pretty much how my communication works @alexflav23
a service that can show a popover or modal with information
Flavian Alexandru
@alexflav23
Would you mind showing some kind of example?
Jonathan Rezende
@jodinathan
There is a service that is injected when needed in a component (pages or controls).
This service has a stream that emit the necessary information I need to display a modal.
There is a component that basically listens to the stream and has the modal prepared to display the streamed info.
so any component can use this service to display modal and other stuff generically
Flavian Alexandru
@alexflav23
@jodinathan Is there a repo somewhere? Or is this some kind of library that can be used?
Jonathan Rezende
@jodinathan
for now it is a private component @alexflav23
Gani Georgiev
@ganigeorgiev

@alexflav23 The approach that @jodinathan suggest could be summarized in the following example:

  1. Create a service that emits events:

    class MessageService {
     final _newMessageCtrl = StreamController<String>();
    
     Stream<String> get onNewMessage => _newMessageCtrl.stream;
    
     void addMessage(String message) {
       _newMessageCtrl.add(message);
     }
    }
  2. (optional) Inject the service in your main.dart (or other), so that it can be instantiated by the Angular DI:

    // main.dart
    @GenerateInjector([
     ...
     ClassProvider(MessageService),
    ])
  3. Listen to the service events in your message handler component:

    @Component(...)
    class MessageComponent implements OnInit, OnDestroy {
    MessageComponent(this._messageService);
    
    final MessageService _messageService;
    
    StreamSubscription _serviceListener;
    
     @override
     void ngOnInit() {
       _serviceListener = _messageService.onNewMessage.listen(receivedMessage);
     }
    
     @override
     void ngOnDestroy() {
       _serviceListener?.cancel();
     }
    
     void receivedMessage(String message) {
         // do something with the message...
     }
    }
  4. Register and place your message component somewhere that you want to be visible, for example in app_component.html:

    <router-outlet [routes]="Routes.all"></router-outlet>
    <message-component></message-component>
  5. Call MessageService.addMessage() from anywhere to add new message.

    @Component(...)
    class OtherComponent() {
     OtherComponent(this._messageService);
    
     final MessageService _messageService;
    
     void someHandler() {
         _messageService.addMessage('Something...');
     }
    }

For simplicity I'm passing just a string, but you can use a wrapper object instead that could contains the message type (info, error, warning), auto hide duration, etc.

Skawa also has a Snackbar component that uses similar approach - https://github.com/skawa-universe/skawa_components/tree/master/skawa_material_components/lib/snackbar

Dkrinker
@Dkrinker

Newbie using Angular Dart and components and having an issue using the <material-menu> component. I can display the menu items but my actionWithContext function is not getting called when I select a menu item (in fact the menu ignores the click and the menu remains open). Here is the code I am using:

In dart component:

 MenuModel<dynamic> get optionsMenu {
    return MenuModel<dynamic>([
      MenuItemGroup<dynamic>([
        MenuItem<dynamic>('Option 1', actionWithContext: (context) => print('Option 1 selected')),
        MenuItem<dynamic>('Option 2', actionWithContext: (context) => print('Option 2 selected'))
      ])
    ], icon: Icon('more_horiz'));
  }

In associated html file:

        <material-menu [menu]="optionsMenu"></material-menu>

Any suggestions?

Eric Windmill
@ericwindmill
s there any good resources out there that can tell me how to run my own build steps before the angular build steps are ran?
Dkrinker
@Dkrinker

Can you not use enums in ngSwitch? For example:

// Define enum
enum ViewType {
  off,
  mediaPlayer,
  tunerSource,
  otherSource,
}

// Export enum
...
 exports: [ViewType],
  directives: [
    RoomHeaderComponent,

// Provide getter that returns enum to [ngSwitch]
  ViewType get displayViewType {
...}

// HTML
    <div [ngSwitch]="displayViewType">
        <mediaPlayerView *ngSwitchCase="ViewType.mediaPlayer" [zone]="zone" [npi]="npi"></mediaPlayerView>
        <otherSourceView *ngSwitchCase="ViewType.otherSource" [zone]="zone" ></otherSourceView>
        <offView *ngSwitchCase="ViewType.off" [zone]="zone" ></offView>
    </div>

or, how can you use enums for ngSwitch?

Dkrinker
@Dkrinker
Never mind, that does work.
ggeorgiev92
@ggeorgiev92
Hey guys can somebody tell me what happen with angular-dart? Is it deprecated? No more updates....
I have a project with angular-dart which using sdk 2.3.2 and now I'm tring to update it to the last sdk and I just noticed that angular dont have any updates sooner
now I cant update my project because I cant use last version of build_runner because it\s not working with my old angular..
Do you think that angular-dart team will stop supporting angular-dart (or they already did that)
Mitai
@MitaiGit
@ggeorgiev92 no, they promise that there will be updates, but when they don't know
Jonathan Rezende
@jodinathan
from what I know they are focused on NNBD and angular dart should get some focus after nnbd gets out
5 replies
Matias Meno
@enyo
For some reason my angular form is really slow. When I type something, the characters appear seconds later, Safari even warns that the site is using considerable resources and reloads the site from time to time, but it's also very slow on Chrome.
4 replies
Jonathan Rezende
@jodinathan
is it possible to compile two versions when building?
I would like to have a build/ which is the production release for end users and a buildDev/ with less restrictive dart2js flags
Jonathan Rezende
@jodinathan
Gani Georgiev
@ganigeorgiev
@jodinathan I'm not sure whether there is more efficient way to do it, but you could specify different dev_options and release_options for the build_web_compilers builder and run webdev build twice (with and without the --no-release flag). Example build.yaml:
targets:
  $default:
    builders:
      build_web_compilers|entrypoint:
        dev_options:
          compiler: dart2js # force using dart2js instead of dartdevc
          dart2js_args:
            - -02
            # ....
        release_options:
          dart2js_args:
            - -04
            # ...
Jonathan Rezende
@jodinathan
it is possible to run different builds, dev_options and release_options
but dart2js isn't very helpful for debuging even with less restrictive flags
I am trying to build it with DDC however the amount of generated files aren't helpful either
any ideas on how to build an easier-to-debug web app?