Re: [AngularJS] please recommend me a Angular book.

[Zlatko Đurić]

Hi, 

Angular.io has a resources page with a lot of good things,maybe you can find 
something interesting there as well:

https://angular.io/resources

Zlatko

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/angular/0c7aa30c-c036-4ab6-9262-1ce9dc6e2ab3%40googlegroups.com.

[AngularJS] Re: How to make Method process in sequence

[Zlatko Đurić]

Hi Siva,

Your call to the method is sync, but the actual execution is async. 
Additionally, your method1 calls method2, which has what we call a *side 
effect*. (Setting that local *path* variable).

You can do several approaches here, e.g. use a promise, like Tito suggested:

buttonClick() {
  method1()
  .then(() => {
  router.navigateByUrl(path);
   });

Of course, you also need to make method1 a promise that doesn't return 
until method2 with it's side effect is executed:

method1() {
  return apiCall()
.then(result => this.method2(result));
}



Alternatively you can make your buttonClick an async function, then it 
might be easier to understand, so now (together with *method1* change 
above), your buttonClick looks like this:

async buttonClick() {
await method1();
return router.navigateByUrl(path);
}

There are other ways to do this, but this should get you started.

Zlatko

On Saturday, July 13, 2019 at 6:57:55 AM UTC+2, Sivaprakash Gopal wrote:
>
> Hi All,
>
> I am new angular, how to make method processing as sequential. Based on 
> api response, i need to navigate to different component.
> In this case, how to make process sequential.
>
>
> let responseObj = null;
> let path = null;
> buttonClick(){
> method1();
> router.navigateByURL(path);
> }
>
>
> method1(){
>  responseObj =  api call();
>  method2(responseObj);
> }
>
> method2(responseObj){
>  path = processing - > responObj;
> }
>
> Thanks,
> Siva
>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/angular/dbec1b0a-1a3b-4062-9f74-e969519a1c80%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Define static variable on build

[Zlatko Đurić]

Hi Sander,


On Wednesday, December 5, 2018 at 5:27:36 AM UTC+1, Sander Elias wrote:
>
> Hi Zlatko,
>
> Doesn't that pull the entire package.json into your build? 
> That means that you putt all available attack vectors into the public part 
> of your code, right? (yeah, it saddens me that I do have to think about 
> stuff like this...)
>
>
>

Oops, you're right, it does, I've just checked. I was not aware of this - 
and even though the app where this is used is still in development, and 
only has been planned as an internal tool, I'm removing it instantly. I 
guess it's back to generated *env* files again.

Zlatko


-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Define static variable on build

[Zlatko Đurić]

FWIW this works for me in environments file:

export const environment = {
  env: 'DEV',
  production: false,
  useMocks: false,
  clientVersion: require('../../package.json').version,
  // the rest of the stuff.
};

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Problem when loading routes from DB dynamically

[Zlatko Đurić]

The problem might be that your routes are not available at resolve time. You 
can go load the things later, but it doesn't matter any more, the router 
already failed.

You could put the router loader config into app initializer though. Then routes 
would get loaded before the app starts. Can't create an example for you on the 
phone, but Google got me here, looks good, you just need to adjust  it:
https://stackblitz.com/edit/angular-app-initializer-load-config?file=app%2Fapp.module.ts.

Alternatively, if this doesn't work for you, you can do tricks.
Step 1: Have a catchall route (`path: '**'`) that renders some dummy component 
("Loading, please wait...").
So if you go to root path, you get your app component, and if you go to 
anything else, you land here - and start loading router config.

Step 2: Add a bit of extra work to the loader, tell it to check the router 
state, and if you're at the dummy component, take the url and renavigate to it.

Hope those ideas can give you a hint.

Zlatko

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: disable not working in ng-options in angularjs v1.1.5

[Zlatko Đurić]

Not a workaround, but a solution. If you don't want to upgrade angular to a 
version that has this feature, you have to implement the feature yourself. So 
you can tell the management in the company that upgrading angular costs X, and 
developing just this feature costs Y. It's quite likely that Y in this 
particular case is significantly cheaper. But if you had two or three such 
features, X might turn out better in the long run. 
It's on them you decide, and on you to implement the decision.

Now, how would this work?
Simple, create a directive that renders these options on your own, and then 
disables or enables specific options given the proper input data for the 
directive. Shouldn't be too hard, try it, and if you get stuck, let us know 
where you got stuck and somebody can take a look.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: How to prevent parent ngOnInit()

[Zlatko Đurić]

Hi Prashant,

TL:DR;
If you have something happening in your component, and you want to 
influence something up the hierarchy tree, you set this value in a service 
injected to both child and parent, and then move the parent's code in 
question from ngOnInit to a method that fires (or not) depending on this 
observable, or set an Output on the child that can then inform the parent 
that it wants (or wants not) the parent's action to be done.

On Tuesday, October 23, 2018 at 5:36:44 PM UTC+2, Prashant Barwe wrote:
>
>  How to prevent parent ngOnInit()
>

This is not how it works. In Angular's component tree, the hierarchy goes 
in the opposite direction: from parent to child. Child component can't 
control the parent - at least not in this phase.

So you might need to rephrase your question into "how to prevent 
ngOnInit()". Then you'd come to the second problem - you can't. This is a 
part of Angular Component lifecycle, and ngOn* methods always get called.

Maybe rephrase the question again then: "how to control the flow of 
component initialization?" E.g. during OnInit lifecycle, how do I make sure 
that some code gets executed or not, depending on outside context? Well, 
that's easy. Either you inject the outside contect via constructor (e.g. 
inject a service which knows whether an action is required or not) or via 
an @Input() binding, which is also (sometimes*) present for the ngOnInit 
lifecycle - meaning, it's parent component. Which would be, in your 
original scenario, your components' grandparent. So we're back to start, 
meaning again injecting a service or shooting an event via @Output().


-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: How to live build an angular workspace project

[Zlatko Đurić]

Hi Christophe,

I can think of two ways to go forward with this, both with some caveats.

I'm not sure if it would be feasible or even advisable, but there might be a 
way to deal with this with custom tsconfig paths definitions. As you "ng 
generate" a library, it'll add a path to the dist folder of the built library. 
What you can try is rig the tsconfig so that it goes directly into the sources 
of the lib. Then on your app production build, go for the real lib. This means 
two things: 1. you might end up with code working in dev but not in prod (e.g. 
You forgot to build the lib before changes) and 2. you didn't have to go the 
lib way in the first place (unless you share this pub with a few apps), so 
that's not so big a deal. That's I've approach you can try.

Another is to leave cli ng serve and go with something custom. Custom watchers 
that serve the app and reload on app changes, and build-lib-build-app-reload on 
lib changes. I'm thinking custom gulp watchers setup, something similar to how 
Minko Getchev's angular-seed has it: https://github.com/mgechev/angular-seed. 
You can rig the watchers to only watch the libs for the app you're currently 
working on, not all libs, or scope it even more precisely, to single files, for 
example.

It would mean a little more setup work, but you'd get a tailored approach that 
works exactly the way you want it.

Zlatko

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: pretty url

[Zlatko Đurić]

Hi Marc,

This shouldn't be hard, at least not on the Angular side. Let's say you 
have root-level routing pointing to your blog module:

{ path: 'blog', loadChildren: './blog/blog.module#BlogModule' }


Now this blog module has two routes: "*list articles*" and "*display single 
article*".

{ path: 'all', component: AllArticlesComponent },
{ path: ':prettyUrl', component: SingleArticleComponent },


Notice the "pretty url" part of your requirement? It's probably the same as 
you had now, except it's named *prettyUrl* instead of *id*.

Now we wanna look into this "*display single article*" component. Anything 
special it does it get the *prettyUrl* parameter from the route and load 
the appropriate component:

class SingleArticleComponent implements OnInit {
  
  article: Article;
  
  constructor(private route: ActivatedRoute,
  private blogService: BlogService) {}
  
  ngOnInit() {
this.route.params.subscribe((params: any) => {
  const articleUrl = params.prettyUrl;
  this.blogService.getArticleByBetterUrl(articleUrl)
.subscribe(article => this.article = article);
})
  }
}


So all that is left is this blog service implementation. How you load the 
article by *prettyUrl *depends on where you save it (e.g. JSON, REST API, 
CMS, Firebase etc).

Hope that helps.




-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Is it possible to bypass the Error Interceptor selectively?

[Zlatko Đurić]

Hi Partha,

In addition to what Sander has said, you can be more specific in your error 
interceptor on the Angular side. Something like this:

intercept(request: HttpRequest, next: HttpHandler): Observable<
HttpEvent> { return next.handle(request) .catch(response => { if 
(!response instanceof HttpErrorResponse) { // network error, ignore or 
whatevs return throwError(response); } // we got an error from backend. 
Options: // you can check e.g. request method if (response instanceof 
HttpErrorResponse && request.method === 'PUT') { // show or not show the 
dialog .. // alternatively check by your calling URL } else if 
(request.url.contains('bulk-upload-endpoint') { // special handling here } 
Or if it is just one endpoint that needs special handling, catch error 
there on the call site and swallow it. Hope that gives you ideas. 


-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Inheritance and Generics

[Zlatko Đurić]

Hard to say without looking at the code. I assume you've called super() 
somewhere which calls the parent's constructor, sets up the "roleService"?

If you share the code, somebody might help you.

On Friday, September 28, 2018 at 9:22:12 AM UTC+2, Partha Majumdar wrote:
>
> Thanks Sir.
>
> I tried the same.
>
> After inheriting I am getting the following error.
>
>
> ERROR TypeError: this.roleService.getData is not a function
> at 
> AppRoleListComponent.push../src/app/role/role-list/role-list.component.ts.AppRoleListComponent.ngOnInit
>  
> (role-list.component.ts:41)
> at checkAndUpdateDirectiveInline (core.js:9250)
> at checkAndUpdateNodeInline (core.js:10514)
> at checkAndUpdateNode (core.js:10476)
> at debugCheckAndUpdateNode (core.js:11109)
> at debugCheckDirectivesFn (core.js:11069)
> at Object.eval [as updateDirectives] (AppRoleComponent.html:9)
> at Object.debugUpdateDirectives [as updateDirectives] (core.js:11061)
> at checkAndUpdateView (core.js:10458)
> at callViewAction (core.js:10699)
>
>
> How can I resolve this?
>
> On searching the internet, I figure that it is some known bug in Angular.
>
> Regards,
> Partha
>
> On Friday, 28 September 2018 12:42:09 UTC+5:30, Zlatko Đurić wrote:
>>
>> In short, yes, you can extend a TypeScript class or implement an 
>> interface, and you only need to import the class in the component itself. 
>> You can even import a class from a library in your Node modules folder.
>> But there are two things to be aware of:
>> - you have to make sure that the dependencies are satisfied. E.g. If the 
>> abstract class takes a UserService as a constructor parameter, your module 
>> (or ultimately your root module) need to provide that service. Sounds 
>> obvious, but worth pointing out.
>> - the bigger potential issue is that you're extending the TypeScript 
>> class, not an Angular-specific component. That means that you have to apply 
>> angular decorators to the new class (Injectable, Component etc), anything 
>> on the parent class is simply not there.
>>
>>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Inheritance and Generics

[Zlatko Đurić]

In short, yes, you can extend a TypeScript class or implement an interface, and 
you only need to import the class in the component itself. You can even import 
a class from a library in your Node modules folder.
But there are two things to be aware of:
- you have to make sure that the dependencies are satisfied. E.g. If the 
abstract class takes a UserService as a constructor parameter, your module (or 
ultimately your root module) need to provide that service. Sounds obvious, but 
worth pointing out.
- the bigger potential issue is that you're extending the TypeScript class, not 
an Angular-specific component. That means that you have to apply angular 
decorators to the new class (Injectable, Component etc), anything on the parent 
class is simply not there.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Re: [AngularJS] Re: Changing a Components Template without Subclassing

[Zlatko Đurić]

Hello,

Well that's certainly an ingenious solution, I haven't thought of that
before! What you're doing is essentially shipping the template file as an
asset.

The custom loader I've suggested would have worked similar, except it would
load the code directly from node_modules on build time and get rid of the
extra assets you'd be shipping.

Anyway, glad that you've solved the problem.
Zlatko

On Sun 2. Sep 2018 at 03:20, Codewise IO  wrote:

> Hi Zlatco,
>
> Thank you for your response. I'll note that I don't need my template to be
> present at run time because I am not looking to have my application
> dynamically set the components template. I just want to be able to define
> what the template is in @mylib, and over-ride that setting later, a simple
> registry containing the template path to use that over-riding of the
> template could happen before the app is compiled in order to be AOT
> compliant.
>
> So that said the solution I came up with *does* actually load the
> template in at run time. While I will admit it seems like a *slightly * 
> fragile
> solution as, like you stated, Angular could change their implementation and
> the behavior I am utilizing may or may not be intended - *but it works.*
>
> What I have done is moved all of my templates out of their original
> directories and into an assets folder. In @mylib, I define my
> LoginComponent like this:
>
> let ngComponent = {
>   selector: 'ag-login',
>   templateUrl:  '../../../../assets/agape/auth/login.component.html'
> }
>
> @Component( ngComponent )
> export class LoginComponent extends FormComponent  {
>
> As I pointed out in my original email, when I move the component
> definition outside of the @Component() decorator and put it in a variable I
> was getting an error in the browser "Cannot find /login.template.html".
> After doing some digging, I realized what was happening is that Angular was
> not following it's typical behavior during compilation and moving that
> contents of that login.component.html file into the template property,
> but leaving it as is. Then during run time was looking for the file at
> http://myhost/login.component.html  After some experimenting I found that
> specifying the file path as in the example above - angular was looking for
> the file at http://myhost/assets/agape/auth/login.component.html. From
> this point, by adding in the assets directory to my angular.json file
> angular is able to find my template at runtime. In my library
> workspace/sandbox my assets declaration looks like this. The first line
> there pulls in the assets from the distribution directory, and the second
> pulls in the local assets folder.
>
> "assets": [
>   ...
>   { "glob": "**/*", "input": "dist/agape/auth/assets/", "output":
> "/assets/" },
>   { "glob": "**/*", "input": "src/assets/", "output": "/assets/" }
>   ...
> ],
>
> By utilizing the same directory structure in my local assets folder, I can
> effectively over ride the template! Bam! In my consuming applications, 
> "dist/agape/auth/assets/"
> gets replaced with "node_modules/agape/auth/assets/"
>
> To make sure the @agape/auth/assets folder gets packaged, I need to copy
> it from the source directory to the distribution directory before packaging
> because angular cli does not currently do this, so I simply have a post
> build script in my package.json file.
>
> "postBuildAuth": "cp -r ./projects/agape/auth/src/assets
> ./dist/agape/auth/assets "
>
>
> So, here's to keeping my fingers crossed that this doesn't break at some
> point, but having looked into creating a custom component decorator as you
> suggested, I think I could probably replicate this behavior if I needed to.
>
>
> Thank you for the input and I'll hope that somebody else finds this useful.
>
>
>
>
> On Friday, August 31, 2018 at 2:19:30 AM UTC-5, Zlatko Đurić wrote:
>>
>> The problem here is that your template is not present at runtime. Angular
>> Compiler takes metadata and your typescript code, and creates their
>> internal representation of all the stuff. Basically, decorations are moved
>> to something like CompiledComponent.annotations = { template: '...', ...
>> }. But messing with that is a bit tricky + you have a problem of Angular
>> potentially changing this internal stuff.
>>
>> But if you still wanted it, you could write a custom component decorator
>> that would do this magic.
>>
>> If you wanted less magic, as an alternative, you can simply make your
>> component *designed* this way, meaning, in

[AngularJS] Re: Changing a Components Template without Subclassing

[Zlatko Đurić]

The problem here is that your template is not present at runtime. Angular 
Compiler takes metadata and your typescript code, and creates their 
internal representation of all the stuff. Basically, decorations are moved 
to something like CompiledComponent.annotations = { template: '...', ...  
}. But messing with that is a bit tricky + you have a problem of Angular 
potentially changing this internal stuff.

But if you still wanted it, you could write a custom component decorator 
that would do this magic.

If you wanted less magic, as an alternative, you can simply make your 
component *designed* this way, meaning, in the way that it expects optional 
different templates. Something that would work like this:

1. Import your login component.
2. Use it:


 

[AngularJS] Re: How to display a build number in my App

[Zlatko Đurić]

Sure, several ways! You can have a small node script that creates your 
appropriate *environment.ts* on build time. Something like with templating. 
Or, e.g. create a *version.json* on build time next to the env, and have 
your app load from there on start -  basically the same idea just slower. 
Example:

const environment = { version: process.env.VERSION, environment: 
process.env.ENV } // or whatever
require('fs').writeFileSync(`./src/environments/environment.${process.env.ENV}.ts`,
 
JSON.stringify(environment, null, 2));

Or you can have a maybe nicer-looking but more involved solution, something 
like gulp-template .

So your environment looks like this:


{
  version: '<%= APP_VERSION =>',
  environment: 'prod'
}


And just run through gulp template before you serve:

const gulp = require('gulp');
const template = require('gulp-template');
 
gulp.task('default', () =>
gulp.src('src/environments/**')
.pipe(template({APP_VERSION: '123 or whatever you want'}))
.pipe(gulp.dest('dist'))
);


FWIW, mgechev's popular angular seed  
uses gulp-template to inject stuff 
throughout the entire code base, not just env files. I find that a serious 
overkill, if I need more than what I can fit into environment.ts (and nothing 
stopping you from putting an entire 100-line JSON in there), I would reconsider 
if I actually needed a backend for this purpose.

And usually I'll just need maybe two things, so a simple node script, without 
even the npm dependency, usually does it.

Zlatko



On Thursday, August 30, 2018 at 9:10:17 PM UTC+2, Reza Razavipour wrote:
>
> Angular CLI 6
> git
>
> I need to display a version number/tag as part of my applications. 
> My jenkins building the software does have access to the git version
> QA will report a bug and need to report it using a version number.
>
> Any clean way of using that build information to display in my application?
>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Angular 6 - Rendering of dynamic content

[Zlatko Đurić]

If you just want to render some hand-written HTML, use DomSanitizer 
(https://angular.io/api/platform-browser/DomSanitizer, here is an example: 
https://stackblitz.com/edit/angular-safe-unsafe-html) in your component. If you 
want more dynamic behavior with template binding etc, you can either try to 
build out this component dynamically (e.g. like in this answer on SO: 
https://stackoverflow.com/a/48028892/162070). Hope that helps.

Zlatko 

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Angular 2 error monitoring

[Zlatko Đurić]

Hi,

There are serveral good open-source alternatives. For example, you can 
install and run your own Sentry instance 
(https://docs.sentry.io/server/installation/) for free, and use Raven.js as 
your ExceptionHandler 
(https://raven-js.readthedocs.io/en/stable/integrations/angular2.html). Or 
you can try Graylog community version (https://community.graylog.org/) and 
an angular wrapper. Or many other things. The advantage is that you can add 
many plugins there, e.g. build/deploy failures, not just runtime errors. 
The disadvantage - maintaining the server side of this story.

On the other hand, you can try a simple error handler and dump it to your 
server, and build an UI (or a process) to review those errors. The 
disadvantage is, of course, having a small overhead-  building and managing 
this - but the advantage is that you don't need any extra infrastructure in 
your process.

Zlatko

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Create multi step angular 6 without material

[Zlatko Đurić]

Not sure exactly what you're aiming at - multi-step forms?

Here's a pretty basic example (with dynamic steps as a bonus): 
https://stackblitz.com/edit/angular-multi-step-forms?file=src/app/app.component.ts

Not very sophisticated, but it shows the basic steps, dynamic routes, 
static routes, such things.

Some notes:
- have a router-outlet for the content. That way you can navigate between 
those.
- track where you are, from parent component (have something flexible, not 
route snapshots like my example). That'S your state management.
- that nested component does not have to be a single component - check the 
router config, make this several routes for different steps and components.
- post your exact problem, error messages, code sample if you'd like more 
specific help, ok?

Zlatko

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] uib-accordion in angular 5.2 with bootstrap 4

[Zlatko Đurić]

Try ngx-bootstrap, most of Bootstrap is covered there.

Works with bootstrap 3 and 4.

Zlatko

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Re: [AngularJS] Re: [Angular] Test Services and HTTP

[Zlatko Đurić]

Can't read anything off of that picture. What does your console say?

On Wed, Aug 8, 2018 at 11:28 AM jamester go  wrote:

> Hello Zlatko
>
> THank you for responding so i did try it and i am currently experiencing
> something that is not normal i think,
> as you can see in the image below it doesn't continue to the expected page
> where i can see the logs of the
> test.
>
> Do you have any idea regarding this
>
>
>
> On Wed, Aug 8, 2018 at 2:57 PM, Zlatko Đurić  wrote:
>
>> Hard to answer when you provide so vague a question. But since you ask
>> something so basic in such an unanswerable manner, I assume you don't even
>> understand why your question might be a bit out of place. In that case, I
>> seriously recommend going to the source.
>>
>> Go ahead and read everything here:
>>
>> https://angular.io/guide/testing
>>
>> Then try every item you read there, a few times if needed. And *then*
>> when you have specific question, ask again here, somebody usually finds the
>> time to help.
>>
>> Zlatko
>>
>>
>>
>> On Tuesday, August 7, 2018 at 2:08:52 PM UTC+2, jamester go wrote:
>>>
>>> Hello Guys
>>>
>>>
>>> I am currently working in testing some angular services and Http
>>> how should i do it with karma and Jasmine with ease and precision
>>>
>>> Thanks in advance for those who will give time and suggestion in
>>> answering my query!
>>>
>>>
>>> --
>> You received this message because you are subscribed to the Google Groups
>> "Angular and AngularJS discussion" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to angular+unsubscr...@googlegroups.com.
>> To post to this group, send email to angular@googlegroups.com.
>> Visit this group at https://groups.google.com/group/angular.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
> --
> You received this message because you are subscribed to a topic in the
> Google Groups "Angular and AngularJS discussion" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/angular/RKYWfmaYfzE/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> angular+unsubscr...@googlegroups.com.
> To post to this group, send email to angular@googlegroups.com.
> Visit this group at https://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/d/optout.
>


-- 
Zlatko

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Anglular 6 authentication to CRUD RestAPI set headers

[Zlatko Đurić]

Hi Alex,

Two things. First, as the error tells you, you need to use HttpHeaders, not 
Headers. See here from your example:

On Tuesday, August 7, 2018 at 7:02:01 PM UTC+2, a.kr...@ich-selber.de wrote:
>
>
> import { HttpClient, HttpHeaders } from '@angular/common/http';
> const headers = new Headers();
>
>
You import HttpHeaders from Angular, and then use Headers 
 (native to 
browsers). You could mix them, but it's safer to use Angular's classes in 
Angular environment, due to various reasons outside of the scope here.

So use const headers = new HttpHeaders(); instead.


The other problem - HttpHeaders (the class from Angular import, the one you 
actually need) is immutable. So you have to change this:  

const headers = new HttpHeaders();
headers.append('appkey', '123');

Into this:

let headers = new HttpHeaders();
headers = headers.set('appkey', '123');

// or chain them all together this way:

const headers = new HttpHeaders().set('appkey', '123').set('Content-Type', 
'application/json');

Anything you append to headers later in your code will not actually be 
added. 

Zlatko

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: [Angular] Test Services and HTTP

[Zlatko Đurić]

Hard to answer when you provide so vague a question. But since you ask 
something so basic in such an unanswerable manner, I assume you don't even 
understand why your question might be a bit out of place. In that case, I 
seriously recommend going to the source.

Go ahead and read everything here:

https://angular.io/guide/testing

Then try every item you read there, a few times if needed. And *then* when 
you have specific question, ask again here, somebody usually finds the time 
to help.

Zlatko



On Tuesday, August 7, 2018 at 2:08:52 PM UTC+2, jamester go wrote:
>
> Hello Guys
>
>
> I am currently working in testing some angular services and Http
> how should i do it with karma and Jasmine with ease and precision
>
> Thanks in advance for those who will give time and suggestion in
> answering my query!
>
>
>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Re: [AngularJS] Re: "angular-in-memory-web-api --save" not installing correctly

[Zlatko Đurić]

Well, not sure what to advise you here. As said, I can't see what you have.
Maybe the best thing is to try from scratch, install the tutorial in a new
directory and play with it there.

On Tue, Aug 7, 2018 at 9:24 AM  wrote:

> No, I just installed the version the tutorial said to install. That was a
> month ago. There could be a new version.
>
>
> On Monday, August 6, 2018 at 4:15:25 PM UTC-7, georgeogo...@gmail.com
> wrote:
>
>> Howdy. When I try to install angular-in-memory-wep-api --save, it doesn't
>> work and gives messages on the CLI: "6 vulnerabilities require manual
>> review and cannot be updated". I found the website with the codes, but I'm
>> still an Angular beginner and it's meaningless to me. I tried npm audit
>> fix, but that didn't work. Any help would be massively appreciated. Thanks!
>>
> --
> You received this message because you are subscribed to a topic in the
> Google Groups "Angular and AngularJS discussion" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/angular/ntDKgtdCx_I/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> angular+unsubscr...@googlegroups.com.
> To post to this group, send email to angular@googlegroups.com.
> Visit this group at https://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/d/optout.
>


-- 
Zlatko

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Re: [AngularJS] Re: "angular-in-memory-web-api --save" not installing correctly

[Zlatko Đurić]

That could be the issue too. Hard to say without looking at any code
though. Did you try changing the version to whichever Angular you use?

On Tue, Aug 7, 2018 at 9:11 AM  wrote:

> You think it could be this issue? This is the tutorial and command I am
> trying to do.
> https://github.com/angular/in-memory-web-api/issues/189
>
> On Monday, August 6, 2018 at 4:15:25 PM UTC-7, georgeogo...@gmail.com
> wrote:
>
>> Howdy. When I try to install angular-in-memory-wep-api --save, it doesn't
>> work and gives messages on the CLI: "6 vulnerabilities require manual
>> review and cannot be updated". I found the website with the codes, but I'm
>> still an Angular beginner and it's meaningless to me. I tried npm audit
>> fix, but that didn't work. Any help would be massively appreciated. Thanks!
>>
> --
> You received this message because you are subscribed to a topic in the
> Google Groups "Angular and AngularJS discussion" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/angular/ntDKgtdCx_I/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> angular+unsubscr...@googlegroups.com.
> To post to this group, send email to angular@googlegroups.com.
> Visit this group at https://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/d/optout.
>


-- 
Zlatko

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: "angular-in-memory-web-api --save" not installing correctly

[Zlatko Đurić]

Hi,

On Tuesday, August 7, 2018 at 1:15:25 AM UTC+2, georgeogo...@gmail.com 
wrote:
>
> Howdy. When I try to install angular-in-memory-wep-api --save, it doesn't 
> work and gives messages on the CLI: "6 vulnerabilities require manual 
> review and cannot be updated". I found the website with the codes, but I'm 
> still an Angular beginner and it's meaningless to me. I tried npm audit 
> fix, but that didn't work. Any help would be massively appreciated. Thanks!
>

This doesn't look like a problem with that library. If you go to an empty 
folder somewhere outside your project and npm i angular-in-memory-web-api, 
you'd probably succeed with installation.

What I suspect is that you have other issues in your project. Can you post 
the output of "npm audit"?

Zlatko

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Angular 6 routing change layout for one childpage

[Zlatko Đurić]

Sure it is. Just define the new route before the other profile route if you 
have a possible path collision; Angular will render the first route that 
matches. 


On Wednesday, August 1, 2018 at 5:55:44 PM UTC+2, fr...@ugetit.eu wrote:
>
> Hi Guys,
>
> I'm working on my first angular app. I have one question about routing.
> I have a app-routing module set up like this:
>
> const routes: Routes = [
>   {
> path: '', component: Layout2Component, canActivate: [AuthGuard], 
> pathMatch: 'full', children: [
>   { path: '', component: HomeComponent },
> ]
>   },
>   { path: 'account', component: AccountLayoutComponent, loadChildren: 
> './pages/account/account.module#AccountModule' },
> ];
>
>
> The account-routing module is set up like this:
>
>
> @NgModule({
>   imports: [RouterModule.forChild([
> { path: 'login', component: LoginComponent },
> { path: 'reset-password', component: ResetPasswordComponent },
> { path: 'recover-password', component: RecoverPasswordComponent },
>   ])],
>   exports: [RouterModule]
> })
>
> I want to add a route "account/profile" that uses the layoutComponent as 
> layout instead of the AccountLayoutComponent.
> Is this possible and how?
>
> Thanks!
>
> Frans
>
>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Angular 4 Component for Multiselect with auto-suggest

[Zlatko Đurić]

Try ng2-select: https://valor-software.com/ng2-select/

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Why moving from one version of Angular to another is so painful ? Is Angular a right choice for the client side development ?

[Zlatko Đurić]

In addition to the other two answers, I will add another line of thought, 
perhaps a little controversial.

The answer to your question might be " yes", you have made a mistake by 
choosing Angular. We're all focused on different fields and front-end 
development might not be your strong side.

I'm saying front-end here, and not just Angular, because in the last decade 
there's been so many changes that if you're  not in the field, you can be 
simply overwhelmed by the amount of things changing on almost daily basis.

Web standards themselves are being extended constantly. Browsers (including 
Microsoft browsers) are adding and changing functionality with every release, 
every few weeks.

That's not to say it can't be done. It might just be the case that your team's 
skills could use some dedicated training. Or you could benefit a lot from 
hiring an expert to verify your architecture and do a proper code review.

E.g. if you have to "retest the entire application" on each upgrade, your test 
coverage might be too low or your tests might be suboptimal. 

So perhaps you don't need to look into your technology looking for faults. 
Maybe it would be better to upgrade yourself a little, so to speak.

Please take this criticism as constructive. I'm not implying that you don't 
know angular. I'm merely trying to say that if there are teams doing things 
successfully, where yours is not, this could be one contributing reason and 
addressing it might help you make a release.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Re: [AngularJS] Re: Do I use routes or a directive?

[Zlatko Đurić]

Sure there's a way. But the question is, why do you fetch the data from the 
_component_ each time, perhaps you can keep the data on a service and then 
define your triggers for refreshing the data.

On Thursday, May 10, 2018 at 5:27:45 PM UTC+2, Reza Razavipour wrote:
>
> destroyed would mean, recreated, data re-gotten and re-renderered, etc...
>
> No way to avoid the the destruction and redoing the work that was done 
> before?
>
> Regards,
> Reza
>
> On Wed, May 9, 2018 at 11:15 PM, Sander Elias  > wrote:
>
>> Hi Reza,
>>
>> I would say router. 
>> Also, you don't want your components destroyed? (router will do that 
>> too!). Why not?
>>
>> Regards
>> Sander
>>
>> -- 
>> You received this message because you are subscribed to a topic in the 
>> Google Groups "Angular and AngularJS discussion" group.
>> To unsubscribe from this topic, visit 
>> https://groups.google.com/d/topic/angular/Cf6z3uZd8X8/unsubscribe.
>> To unsubscribe from this group and all its topics, send an email to 
>> angular+u...@googlegroups.com .
>> To post to this group, send email to ang...@googlegroups.com 
>> .
>> Visit this group at https://groups.google.com/group/angular.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Angular in a multi monitor environment

[Zlatko Đurić]

Jürgen,

That's exactly what I've said: you cannot have multiple windows without 
having multiple apps. Basic tech is not angular-specific: window.open, 
window.postMessage, window.opener, window.addEventListener('message', ...). 
Those are all parts of the regular JavaScript API.

So, basically, you start the app twice. But you can still communicate 
between the two windows, you can probably find a few good modules that do 
similar things on angular-specific way, or just JavaScript packages that 
you can wrap in an angular service. Here, here's a super-faulty and ugly 
demo of the base functionality, if I understood that correctly:

https://stackblitz.com/edit/angular-cross-window-messaging?file=app/parts.component.ts

Go there, click on the "map window" link, then you can "talk" between the 
two app instances.




On Monday, March 26, 2018 at 1:00:50 PM UTC+2, Jürgen Stolz wrote:
>
> Hi Zlatko,
> I did not understand why you said it is not Angular specific. I wrote an 
> Angular app witch contains several Angular (View) components and this Views 
> I need to show on several monitors. So everything is inside Angular, shure 
> I could open another window but that is not I want, I want to open the 
> Angular (View) component (.css, .html) in an other (new) window.
>
>  @Sander I will search your answer and check if it fit my needs.
>
> I try again :) describing my problem with multi monitor in a single app, 
> using another example.
>
> I developed an Angular application which contains >3 Angular components, 
> every component uses Angular material, the main.css for styling and a data 
> service which holds the data.
>
>- First => Order component (table grid) contains a lot of data > 1000 
>rows (example) and the user always need to see this table
>- Second => Order detail component, shown after a click. As the name 
>said this are the details of the order and the user could show or modify 
>details of the order.
>- Third => a component which shows trips (table)
>- Forth => a map component (shows orders, trips, or whatever was 
>selected)
>
> In the application everything works but the user always need to switch 
> back to the First component if he wants to see the OrderGrid again. I do 
> not like this behaviour, so I changed the application and show 2 components 
> side by side. Shure this works too, but if the the user shows all possible 
> columns of the OrderGrid there isn´t enough space and it looks terrible. My 
> next thought was, ok, I show the OrderDetails in a separate window on the 
> second monitor and this is my problem I could not figure out how to use my 
> application WITHOUT starting the application twice. (Perhaps this is not 
> possible??)
> The next step, the user use the orders and plan a trip. Trip is the third 
> component and should be displayed on the third monitor, this view should 
> always be visible too, because sometimes events occour and they should 
> displayed immediatley.
>
> At the moment I use a data service to share the data between the 
> components, this is perhaps a part which I need to change too (as you 
> mentioned).
>
>
> Best wishes
> Jürgen
>
>>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Angular in a multi monitor environment

[Zlatko Đurić]

For what it's worth, this sounds like a viable scenario in controlled 
environment. Nothing to do with Angular specifically, though.

You mention accident reports and a map of them. I assume this means this will 
be running by trained operators who know how to follow instructions, or maybe 
public displays or similar.

In this case, it's ok to, say, open the dashboard with reports and offer "Open 
map window" action to the operator. You can then open another window with the 
app, pointing to your map module and let the operator arrange it to the 
appropriate window position.

All that remains is communicating between windows. There are several ways to do 
that, from service workers and the like, cross-window messaging if map was open 
as an iframe, some sort of WebRTC, even your backend environment, via, say, 
websockets, or even plain old polling.

As mentioned, none of this is angular-specific. Also, this assumes a scenario 
where the user is motivated to open two windows of your app, either by being a 
trained operator, or in case of a publicly available app, by having enough 
benefit and good instructions for using your site in such a way.

Shoot me a question about any of these if you're stuck with some detail.
Zlatko

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: cmd zurück zur Eingabe

[Zlatko Đurić]

Hi Frank,

Du hast mindestens zwei Möglichkeiten:

1. STRG-C 
Damit ist die läufende Kommande gebrochen (so, "ng serve" läuft nicht mehr).

2. "ng serve" im Hintergrund starten:

ng serve &

Jetzt läuft dein "ng serve" Prozess in Hintergrund und dein Shell ist frei 
für neue Kommande. 

Andernfalls kannst du auch ein Terminal Multiplexer nutzen, wie screen 
 oder tmux 
.

Zlatko

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Need to pass class styles into Angular module/component... anyone have naming conventions they use?

[Zlatko Đurić]

On Wednesday, February 28, 2018 at 4:05:52 AM UTC+1, Warwick Price wrote:
>
> To enable the parent to still be able to override the styling on these 
> components 
>
>
I think you  might want to reconsider this. CSS works better and is way 
easier to deal with when you work the other way around: have a global 
theeming stylesheet and then only override things in the component if you 
need to. Nothing stops you from having a global CSS file with a theme, and 
then only override locally when you need.

So, e.g. global style:

.dark-badge {
   color: #bfbfbf;
   background-color: #404040
}

and then local style:
.darker-badge { // or just .dark-badge again
  color: #efefef;
  background-color: #101010;
}

Then in your component you have:



As Sander says, view encapsulation is the key here. It makes sure that any 
styles you write in your component *only apply to your component *by 
default. You can let those styles leak, or you can even cheat with things 
like */deep/ .child-class {};* but that is usually done in some edge cases 
you don't know about.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Cannot read property account_group_name of null

[Zlatko Đurić]

Alternatively if empty rows/cells are ok, try this:

{{ accountgroup?.account_group_name }} 

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Moving our business app from AngularJS 1.6 to Angular 5

[Zlatko Đurić]

Having very recent experience with something similar, I would say you'll need a 
week to set up and adjust your workflow. Then, if your code is mostly in 
services and if you had component based approach, "just changing the bindings" 
will take a few weeks to few months, depending how much work have you done.

But the thing is now just the start and you will probably need a few more 
weeks/months to do adjustments, move bindings from direct to services, from 
promises to observables, from JavaScript to typescript, to really get into the 
spirit of the switch to angular 5.

Of course, that's very rough outline and it really depends on your team, your 
code, experience etc.

I hope that helps.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: express api using one index.js that points to many route files

[Zlatko Đurić]

What do you do in those files with the app?

On Wednesday, February 14, 2018 at 8:55:33 PM UTC+1, Tito wrote:
>
> Greetings,
>
> I want to use one index file that is called from my main app.js
>
> routes = require('./routes')(app);
>
> The index.js in that routes folder calls
>
> module.exports = function(app) {
> require('./virtualmachines')(app); 
> require('./hardwares')(app); 
> };
>
> but only api calls from virtualmachines are coming with results when I do
>
> curl localhost:8080/api/virtualmachines
>
> What am I missing here. Why only the first route loads?
>
> Thanks much!
>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Developing an Angular Application

[Zlatko Đurić]

In addition to downloading and installing Node.js, and @angular/cli and all 
the core angular frameworks, as Sander says, I suggest the following list, 
too.

Libs:
- your UI library of choice (like Material Design -> then @angular/material 
and @angular/cdk, or bootstrap: ngx-bootstrap or  ng-bootstrap, or maybe 
primeNG or similar),
- you might like utilities libraries, such as moment.js, lodash etc,
- domain-specific libs, or things like ng2-charts or similar, or maybe 
ngx-datatable,
- take a look at this list: 
https://github.com/brillout/awesome-angular-components and take your picks

Tools:
- probably http-server or similar standalone web server to test production 
builds, if you need
- tools such as gulp, webpack and your favorite plugins

Docs: 
- angular docs (basically clone the angular/angular and angular/angular.io 
github repositories)
- I would probably download the entire MDN docs, just to be sure 
(https://developer.mozilla.org/en-US/docs/MDN/About)
- rxjs documentation
- if you can, your UI library docs (e.g. Bootstrap docs).
- any software and documentation specific to your project (maybe some 
hardware gadget, or some specific domain etc)

Examples:
- try to find an example open-source app or two that do similar things to 
what you will do. Looking at examples will be your stackoverflow.

That would be a nice start. If you can access more docs later on (by 
fetching them to USB or something, then taking them offline), it would 
likely do. But if not, then reconsider the list above once more after 
detailed planning, if you can.

But I gotta say, you presented a nice challenge there. That would be an 
interesting thing to try.


-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Material Design vs Bootstrap (or both?)

[Zlatko Đurić]

You need bootstrap to have the material theme specifically or regular 
bootstrap works for you? If you don't care, maybe you can put your 
bootstrap experience to good use with ngx-bootstrap or ng-bootstrap?

I've also used MD lite (https://getmdl.io/) but had to write some wrappers 
for integrating fully, I do not recommend that now that Angular Material 2 
is ready.

On Friday, January 5, 2018 at 2:20:06 AM UTC+1, Rich Leach wrote:
>
> I'm going to be designing more and doing more layout work for Angular and 
> wanted to know if the community has a preferred toolset?
>
> I've seen a lot of Material Design https://material.angular.io/
>
> but I've done a lot with Bootstrap in the past so I found
>
> https://mdbootstrap.com/angular/
>
> (which isn't free, I know) but looks a lot more familiar.
>
> Any others out there I should consider? Not trying to start a war or 
> debate, just trying to understand what's out there and mainstream
>
> Thanks,
>
> Rich
>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: How to use a global variable in HTML and use it in typescript? (Angular4)

[Zlatko Đurić]

You could "teach" typescript that there is a "standalone" global variable, 
e.g. in your module:


declare const standalone: any;
.. // further in component..
this.property = standalone === 'true' ? true : false;


You could even give it some type instead of any. But then it's not on your 
imported Window, it's on whatever global namespace you're using.

So if you use this code in a webworker or universal, it might fail.

You could also extend the Window type, but that depends on the details, 
where did you import the Window from etc.


On Thursday, January 4, 2018 at 1:04:26 AM UTC+1, Reza Razavipour wrote:
>
> Not finding the solution anywhere else...
>
> I need to define a variable in my index.html file and use it in my 
> angular4/typescript code and I get a compile error.
>
> my compile error is:
>
> Error:(109, 27) TS2339: Property 'standalone' does not exist on type 
> 'Window'.
>
> the variable definition in HTML is:
> 
> var standalone = 'true';
>
> System.import('app').catch(function (err) {
> console.error(err);
> });
> 
>
> the typescript code is:
>
> if(window.standalone !== undefined) {
> console.log('standalone');
> }
>
> Anyone sees what I am doing wrong?
>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: How to listen to Server POST event in Angular 5

[Zlatko Đurić]

Happy New Year!

I'll try to give you a hint. Web app type clients can't listen to classic HTTP 
POST. In fact, webapps typically can't serve any type of HTTP requests.

If you need the server to initiate contact, look into technologies like 
websockets, Web Push API, server-sent events or even common long polling. All 
those have different properties, so study them and pick what is best for you.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Dynamic validator checks

[Zlatko Đurić]

I need to dynamically add a validator to an angular form control from a 
directive.

Example:


@Directive({ selector: 'my-directive' })
export class MyDirective implements AfterViewInit  {
  @Input() myDirective: boolean;
  control: AbstractControl;
  constructor(private form: NgForm, private el: ElementRef) {}
  ngAfterViewInit() {
setTimeout(() => {
  const name = this.el.nativeElement.getAttribute('name');
  this.control = this.form.controls[name];
  // this.control.setValidator... kills my other validators.

  // also, how do I check if "required" or "minlength" are already applied?
});
  }
}


How do I check if this control has, e.g. "required" attribute, and set it 
if not? Without overriding other validators?


I could use Reactive forms extensions solving this, but the users of this 
directive will be using template forms, so I want to avoid mandating much 
in the components that use this. 

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Track dynamic number of inner observables

[Zlatko Đurić]

I have a service in Angular 5 which exposes a BehaviorSubject. It needs to 
track a dynamic array of inner subscriptions, that come and go on the fly 
and each, once active, can be "on" or "off" (true/false, whatever). My 
exposed subject should return all values (or, well, just an OR of all 
values, if any is on, my whole service is on). I'm not sure how to do this 
with merge and switchmap and other rx operators. 

Example:

@Injectable() class MyService {
  results$: BehaviorSubject = new BehaviorSubject(false);
  callers: any[] = [];

  getSubject() {
const subject = new Subject();
callers.push(subject);
// TODO: Now what? How to tell result$ to listen to this new one too?
subject.finally(() = {
  // TODO: Now what? How to kick it out of the array when complete, and 
tell results$?
});

return subject;
}


Any pointers on how to achieve this?

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: AngularJS+Typescript unit testing - Why karma

[Zlatko Đurić]

Hi Brian,

I definitelly think you could do that. Just as you run "karma start", you 
could also run "mocha". The problem karma is solving is not simply how to 
run tests though. It's also how to setup the whole environment. Sure, you 
can mock an HTML element, run a spy on that element. Then you might need to 
mock an input field. Then video tag. Then placeholder text. Then 
localStorage. Then more and more. Finally you end up with phantom.js - the 
whole browser emulated in JavaScript. Then you say, "what the hell, if I 
mock the whole thing, I might just use the whole thing directly". And you 
run karma.

Small unit tests make sense. But plenty of tests you might write involve 
"document.querySelector("button").click(); fixture.detectChanges()". So you 
have to emulate at least 3 things there. So karma helps you not to.

If you have 1000+ unit tests, that's awesome! But if you have problems with 
these, you might be better off thinking about your test setup instead of 
runner. Perhaps you can only run a subset that's being worked on. There are 
many scenarios and it depends on what you're doing and what problem you're 
solving.

Zlatko



On Tuesday, December 5, 2017 at 9:17:11 PM UTC+1, Brian wrote:
>
> Hi!
>
> Currently in the process of refactoring a good sized AngularJS+ES5 app, 
> with 1000+ karma unit tests to typescript.
> Started to think about all the issues I had wiring karma tests in the 
> past. Things like test suites breaking because I added a new module 
> dependency, then the service I'm testing is not even using that new 
> dependency...
>
> Then I begin to wonder, why even use Karma for unit testing beyond, 
> perhaps, a thin layer of DI testing.
> In a unit test all dependencies should be mocked anyway, so why don't I 
> save myself a lot of trouble, and just test directly the es6 exported 
> classes using something like mocha+chai.
> Abstracting the underlying technology should even help keep things clean?
>
> If I have concerns about the DI side I could always add a thin layer to 
> make sure the angular service is really giving me the instance/type I am 
> expecting.
> Maybe I am too simple minded to see the issues with this... but before I 
> go down this road of all but ditching karma completely though, I thought I 
> might ping you experts to see what you thought.
>
> Appreciate any thoughts!
>
> /Brian
>
>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: breaking down monolithic index.js

[Zlatko Đurić]

Well the recommended pattern is to break down code by components. So try to 
make at least as many folders as you have specific pages and put code for 
each individual page into it's individual folder. And when you see some 
code that you're repeating (it's common to all, e.g. some specific widget), 
you move this further out, into a "shared" component or similar. 

But your question is a bit vague - what do you mean you've "separated your 
API from UI"? You mean backend API calls? All paired into a service?

Yes, that too. You can split it up by some logical key (dunno what that 
might be for your app), and again, extract shared code into a common base 
service which everybody inherits from.


Zlatko

On Friday, December 1, 2017 at 6:06:30 PM UTC+1, Tito wrote:
>
> Greetings!
>
> I have separated my api from UI as recommended by many here. But now my 
> issue is that my api index.js has grown pretty big. I would like to break 
> this monolithic index.js into smaller .js files. 
> am i being OCD or is this a good pattern?
>
> Thanks!
>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Cannot Read Property 'Navigatee' of undefined

[Zlatko Đurić]

On Wednesday, November 29, 2017 at 7:44:16 AM UTC+1, ayushsing...@gmail.com 
wrote:
>
>
> Query on ngSubmit  see screenshot attached
>

Screenshot of the app doesn't help, can you share code? And preferably as a 
plunkr or stackblitz or similar? 

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: template vs. reactive Angular forms

[Zlatko Đurić]

Hi Rich,

In addition to what Sander has said, I'll add one more vote for 
template-driven forms. I often have to style the forms specifically, and 
reasoning about that is, to me, much easier when I can see what I'm styling 
- but that heavily depends on what kind of an app you're working on. I 
never ran into a serious issue with template forms nor reactive, but when 
it's debug time with subtle issues, reactive forms demand more of my poor 
brain, so I prefer the the declarative way that, well, declares clearly 
what it does.


-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Re: [AngularJS] Re: n00b question: concatenating string using 2 way binding

[Zlatko Đurić]

On Wednesday, November 8, 2017 at 2:07:43 AM UTC+1, Rich Leach wrote:
>
> LOL
>
> ... you would think this would be something easy 
>
> {{data[0].companyName}} is not working, nothing gets returned (no errors 
> either).
>
> I've included the returned json below (copied directly from the console). 
> In my service call I'm actually calling "... response.json()" so I'm not 
> sure why this isn't rendering to the screen. I even tried 
>
> 
> QUOTE RETURNED:   {{data[0].companyName}}
> 
>
> ... no dice. Any ideas? 
>
>>
>>>
Well, your code is probably buggy. Here, the "quote getter" works just 
fine: 

https://stackblitz.com/edit/quote-getter?file=app%2Fapp.component.html

Take a look and see what you did differently.
 

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Search filter is too slow in angularjs with large dataset

[Zlatko Đurić]

Hi,

On Wednesday, November 8, 2017 at 5:51:39 AM UTC+1, Suhas Pansare wrote:
>
> I have AngularJs client application which displays data in table using 
> dir-paginate directive of dirPagination.js
>
>   current-page="vm.current_page">
>
> Here is the search input
>
>  
>
>
>
>
I think something like a debounce 

 
would help to avoid running the whole thing on ANY change. E.g. you mention 
deleting a word - let's say 6-character word, and then type a new name, 6 
more characters, that's 12 times running filter, sort, reverse, and then 
also rendering the whole thing.

So your input would become something like:

 


There, now your model update is only running every half a second. See if 
that helps, if not, there are more tricks to try.

 

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Re: [AngularJS] Re: n00b question: concatenating string using 2 way binding

[Zlatko Đurić]

Well, if it's aan array, you will have to do something like
dara[0].companyName.

What does your json look like?

Also, use data?.companyName in the template, so that it doesn't break if
your data is undefined, like when you're getting the quote.


On Nov 8, 2017 1:35 AM, "Rich Leach"  wrote:

> Thank you! This is so helpful as I learn Angular
>
> Everything is now working except for when I want to print the results to
> the screen instead of just logging to the console I made the following
> changes to the app.component.ts file:
>   onGetStock() {
> this.serverService.getStock(this.tickersymbol)
>   .subscribe(
> (data: any[]) => this.data = data, // this was set to
> console.log() but I'm trying to get it to output to the screen.
> (error) => console.log(error)
>   );
>   this.quoteReturned = true;
>   }
>
> ... and here in my app.component.html I'm trying to get the results to
> display:
>  
> QUOTE RETURNED:   {{ data.companyname }}
>   
>
> but this generates an error saying "... companyname is undefined" even
> though companyname was one of the elements in the returned array object
> that was printed to the console.
>
> How do I gain access to the results from the service call on screen? I had
> it in the console
>
> Thank you again,
>
> Rich
>
>
>
>
>
> On Tuesday, November 7, 2017 at 3:13:43 PM UTC-7, Lucas Lacroix wrote:
>>
>> You've bound your input element to the "tickersymbol" variable. Angular
>> will make sure that when the user modifies the input that the member
>> variable on the instance of the component will also be updated.
>>
>> So, here is what you can do:
>>
>> *component.TS*
>> // Note: remove tickersymbolback and tickersymbolfront
>> // need to declare the member variable or you will get a compile error
>> tickersymbol: string;
>> onGetStock() {
>> this.serverService.getStock(this.tickersymbol)
>>   .subscribe(
>> (data: any[]) => console.log(data),
>> (error) => console.log(error)
>>   );
>>   }
>>
>> *Service.ts*
>> getStock(symbol: string) {
>> return this.http.get(*`*https://api.iextrading.com/1.0/stock/
>> *${encodeURIComponent(symbol)}/quote`*)  //this will get updated with
>> the parsed string from the user submitted value
>> .map(
>>   (response:Response) => {
>> const data = response.json();
>> return data;
>>   }
>> );
>> }
>>
>> `` is string interpolation and ${} is the replacement string. So, if the
>> symbol the user typed in was "DEMO", the resulting URL would be: "
>> https://api.iextrading.com/1.0/stock/DEMO/quote;.
>>
>> On Tue, Nov 7, 2017 at 4:57 PM Arnaud Deman 
>> wrote:
>>
>>> Hi,
>>>
>>> I try  again ;)
>>>
>>> I think the interpolation i.e. : '{‌{tickersymbol}}'  can be used in
>>> the template not in the component.
>>> In the component you could use this kind of string :
>>> let apicall: string=`https://api.iextrading.com/1.0/stock/
>>> 
>>> ${tickersymbol}&&/quote`;
>>> (note the quote used: `)
>>>
>>> And then pass it to the injected service.
>>>
>>> Hope this will help !
>>> Regards,
>>> Arnaud.
>>>
>>> Le mardi 7 novembre 2017 18:55:58 UTC+1, Rich Leach a écrit :

 Thank you for your help!

 I think the larger question is, how do I actually parse, and pass, the
 string (that will represent the actual URL to my web service) from my .html
 form and into my .ts component (to ultimately inject into the service)?

 I've been targeting the strategy of trying to combine the 2 strings
 (tickersymbolfront is always static, tickersymbolback is where the form
 value from the user gets appended) and then pass that combined value to the
 method (in the service). I get the feeling I'm doing something silly where
 I'm not able to join the strings correctly and/or incorrectly passing them
 to the method


 SNIPPETS:

 .HTML

 Get
 Stock

 



 .TS

 ...

 export class AppComponent {
   tickersymbolfront:string = 'https://api.iextrading.com/1.0/stock/
 
 ';
   tickersymbolback:string = '{‌{tickersymbol}}'&&'/quote';
   apicall={‌{tickersymbolfront}}+{‌{tickersymbolback}};

 ...

   onGetStock(apicall) {
 this.serverService.getStock()
   .subscribe(
 (data: any[]) => console.log(data),
 (error) => console.log(error)
   );
   }



 SERVICE.TS

 ...

   getStock() {
 return this.http.get('https://api.iextrading.com/1.0/stock/TTD/quot
 e')  //this will get updated with the parsed string from the user
 

[AngularJS] Re: n00b question: concatenating string using 2 way binding

[Zlatko Đurić]

Hey Arnaud,

On 07.11.2017 09:15, Arnaud Deman wrote:



In the associated component you just need something like :
@Input() tikersymbol: string;

As you use two way binding the value will be updated when the user enter a 
value.
Here is the angular doc : 
https://angular.io/guide/template-syntax#two-way-binding---


You don't need @Input() there. Input annotation is required when you expect 
that this component will get input from it's parent component, not from the 
template itself. In this case, a simple *tickersymbol: string;* will bind 
the value in the form template to the value on the component.

It would still work with Input, but it's creating extra bindings. Input 
gives you the ability to do something like this:

@Component({
  selector: 'my-cmp',
  ...
})
export class MyCmp {
  @Input() tickerSymbol:string;
}


// another component which users MyCmp
@Component({
  selector: 'parent-cmp',
  template: `
This is the parent template using MyCmp as child component.
It gives it "tickerSymbol" as input.





Like I've said, this still works in the particular case, but the 
`tickerSymbol` on component where it's been annotated with @Input would 
change not only when the form value changes, but also when the value 
changes on the parent. It's used for different purposes.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: n00b question: concatenating string using 2 way binding

[Zlatko Đurić]

If it's a template-driven form, your component would have a property named 
that.

E.g. 

export class MyComponent {
  tickersymbol:string;
  // later in the code...
  getQuote() {
this.myService.getQuote(this.tickerSymbol).subscribe();
  }
}




On Tuesday, November 7, 2017 at 2:13:10 AM UTC+1, Rich Leach wrote:
>
> Hi
>
> I'm trying to build a string from a form that I will ultimately pass as a 
> url for a service call. 
>
> I have a hard coded string, something like '
> https://api.iextrading.com/1.0/stock/IBM/quote'
>
> ... where "IBM" will be dynamically updated with the user entered value. 
>
> So in my html template I have 
> 
>   
> https://api.iextrading.com/1.0/stock/{{tickersymbol}}/quote
>   
>
> ...which outputs my desired string to the screen. 
>
> Like I said, n00b question, but how/where would I capture the value from 
> the form field and then pass it to my service?
>
> Thanks in advance,
>
> Rich
>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Dynamic HTML passed to Angular

[Zlatko Đurić]

On Tuesday, October 24, 2017 at 8:40:43 AM UTC+2, forexleads wrote:
>
> I am a content management architect looking for some guidance from the 
> Angular experts. Following is my thought process for a project. Please let 
> me if this is doable and recommended.
> "For some pages, to deliver content between header and footer, my Angular 
> app will make API calls to the Content Management System and get HTML 
> content including Angular Components/Directives. These custom components in 
> turn are responsible for making API Calls to other systems and presenting 
> the final content and data to the user. Is this supportable and an 
> acceptable approach?"
>

In some ways it's feasible, but that depends. Which CMS are you talking 
about?

Lazy-loading modules is working quite ok, and you don't even need an API 
for that, it's just about bundling the components of your app. 

If you're talking about getting fresh chunks of raw HTML code, that could 
work, but with more code and some workarounds. You might need to 
"rehidrate" the app later - e.g. if this custom html has some event 
bindings, you'll have to know which are these and reattach them. Have a 
component that knows how to. You might also wanna look into Angular 
Universal there.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Dif btw angular 2 and 4??

[Zlatko Đurić]

On Tuesday, October 24, 2017 at 8:40:43 AM UTC+2, Felix Christo wrote:
>
> Currently I am working on Angular 2. Whats s the diff btw angular 2 and 4?
>

Better HttpClient (with proper interceptors), better animations, and 
depending on which 2, much better router. Which 2 do you have? FWIW 
upgrading should rarely cause any issues, it's pretty straight-forward, not 
many API breakages. But to check if something will break for you, go over 
the Changelog and see: 
https://github.com/angular/angular/blob/master/CHANGELOG.md.

So just install 4.4 and try it.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Redirect with API response

[Zlatko Đurić]

Well, localStorage is also not going to persist accross subdomains. 
Basically it's a cross-domain problem.

But you say you'll have to reload onmce again once you have the token in 
local storage? I don't think that's the case, you can simply inject Router 
into your AuthComponent (whichever receives that url parameter) and after 
validating the token and/or saving it, you simply 
*`this.navigateByUrl('/');` *Shouldn't be a problem at all, and if you 
examine some pages that use OAuth, you'll see that that's exactly how they 
work.

Another solution is to go to my.app.com, and then load the login.app.com in 
an iframe instead. And then when the user logs in, have that iframe 
postMessage back to your app and you proceed with authentication. Not sure 
if that's feasible for your use case though.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Values returned by service display fine in console, cause error on screen

[Zlatko Đurić]

Well, two things. For one, the way you define your property, *stock*, it's 
undefined when the thing is initialized. So, before the *dataService* gets 
the data back, it's undefined in the template, so yuou have 
*undefined.symbol*  - so that's what fails.

You can any of these:

  [...snip...]
  template: `Closing price for {{ stock?.symbol }} is {{ stock ? 
stock.close : '0' }}, while the opening was {{ stock && stock.opening || '' 
}} and high {{ stock.high }}`
  [...snip...]

To solve your problem, pick any example. To learn how to solve the problem 
in the future, try to explain what each of these does.

For some values (not this one though), you can also use *`{{ obj | async 
}}` * - it's called AsyncPipe in Angular, read up on it.

2 more things:
- you fetch stuff in your constructor. That's not a good pattern, some 
things may not work as expected. Instead, do all of this init logic by 
implementing OnInit interface. It's pretty simple actually:
import { Component, OnInit} from '@angular/core'
@Component({ 
  selector:'my-cmp',
  template: 'Hi there',
})
export class MyCmp implements OnInit {
 constructor(private dataService: DataService) {}// in constructor, you 
basically only inject all the dependencies.

  ngOnInit() {
// This runs when the component is fully initialized. You can do all 
the logic-related stuff here. If you also want to access view (template), 
implement AfterViewInit instead.
this.dataService.getStocks().subscribe(stock => this.stock = stock);
  }


Another tiny issue is that you declared *stock* as an array, not a single 
object. 

class MyComponent {
  obj: any;  // that's an object. And it's undefined.
  obj2: any = {};// that's also an object, initialized to {};
  obj3: any[];   // that's an array. But if you test this.obj3.length, 
it's gonna break because your array is empty.
  obj4: any[] = [];  // also an array, but it's initialized when the object 
gets created. It's set to [] (empty array)
  ...
} 

Hope this helps.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Redirect with API response

[Zlatko Đurić]

So I assume that e.g. I login to login.app.com as *zla...@mydomain.com*, 
then your login API returns something like: *{ accessToken: ..., domain: 
mydomain }*, and then login form redirects me to mydomain.app.com. Yes, in 
that case, you'd likely lose all that extra info.

Now, first the simpler attempt: can you host the login form on each site 
directly, and then just call the common login *API *endpoint from there? 
That would work better.

Otherwise you'll have to pass some sort of a token from your login.app.com 
page, and then on app init, you can go and check that token and get that 
original response again. E.g. login.app.com will get *{ domain: myDomain, 
authToken: 'some_value' }*, and redirect you to 
*mydomain.app.com/authenticate?**auth**Token=some_value*, and then the 
/authenticate page on mydomain.app.com will take this token, again go back 
to some backend API, and fetch the original *accessToken* or user data or 
whatever, then redirect you to / or whatever. Basically something like 
OAuth. You'd have to deal with these status/refresh/whatever tokens, make 
sure they expire on time and all that on the backend, but if that's the 
requirement, than that's the requirement :)

Anyway, hope that helps, but if you provide more details on what goes on on 
your login.app.com, someone might come up with a better proposal.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Configuration driven Components

[Zlatko Đurić]

On Friday, October 20, 2017 at 6:06:31 PM UTC+2, Gaurav Verma wrote:
>
> Thank you Zlatko for your response. You said  @Input() layout = 
> 'horizontal' will allow me to configure the NavBar layout but how can I 
> dynamically set the layout?
>

This particular problem is sSimple to solve: *@Input() layout: string = 
'horizontal'* on a component just sets the *default* layout. If you later 
have a service which loads your configuration from JSON or whatever 
storage, it can later set this layout to 'vertical', for example.

Now, some components may not be flexible enough to adjust on the fly - you 
simply do not instantiate those components into view until you have the 
proper 
 

>
> I am trying to drive the components by json configuration. I will give 
> another example here - 
>
[cut]

Yes, all perfectly doable within a regular Angular app. Remember, you can 
load the component right away or lazily, and once loaded, you can 
instantiate it (and provide configuration) right away or modify this 
configuration dynamically. It's very flexible, and you're the actual 
designer of your component's API, so you decide (and, well, implement) all 
of this.
 
 

>
>
> The questions still remain unsolved - 
>
>
> - How can I get Module "A" to know about the NavBarMenuItem components 
> defined in module "B" so that it can create the component instances and add 
> them to the NavBar component dynamically?
>

It's a bit vague question, so the answer is the classic of "it depends". 
You can provide some sort of a child module to your Module A so it knows 
what components it will get. You can create a module dynamically with the 
components you want at that instance, and then inject those. You could even 
(a bit less optimal) create a component itself dynamically and then pass 
that component to your original module so it can inject it into place or 
places it needs. 

 

>
> -  How can I instantiate a component from its class name as the 
> components are created on fly from the configuration fetched from the store?
>

You'd generally use componentFactory to create components on the fly. Look 
into, e.g. ComponentFactoryResolver.
 

>
> - When module “B” is dependent on module “A” then module A cannot be 
> statically depend on module B due to circular dependency problem, without 
> using reflection and runtime composition provided by MEF container how can 
> we solve this?
>

You don't have to depend on B, you use an injector the component factory 
and create factory on the fly and add it to your component, or say, inject 
to a child.

Here's a plunkr demonstrating some of 
this: https://plnkr.co/edit/Zjne3btR82WWtokKEgHm?p=preview. It took a bit 
to make it all work but it basically does what you want: there's a GridCmp 
will take DefaultItems to construct the grid, but it will also take and 
insert components dynamically. And you can choose do do only one of these - 
so dynamic or one-off. And the components were loaded from another module. 
You could possibly load even that other module dynamically 
with NgModuleFactoryLoader. Or you could create your components right there 
on the fly. You could inject all those in other places, too, all over your 
grid-cmp template.

As for the GridComponent itself, you can also make a wrapper component 
there and export it in a module, and this wrapper component basically takes 
config instead the current one, and then creates a module dynamically, and 
injects the whole, ready, module. So, take a look at that and see if that 
answers any of your questions, and if you have more, we're here.

 Basically, it depends on what exactly you're building. A simple nav-bar 
would look similar to what I have made there, and something more complex 
like tabular page layout with different navbars, toolbars and work areas 
for every page will be more complex. So you need to take it from here and 
see what else you can make.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Save the smart table content whe the button is clicked

[Zlatko Đurić]

Not with angular alone. What you can do is pick up the changes on button click, 
and send those changes (or the whole new JSON) to a server that can write to 
files. So if your backend server is something like nginx, apache or "ng serve", 
you can't write that change. But if you have a Node.js, PHP, Java or something 
like that, you can overwrite the data.

Alternatively if this is a learning project, you might want to save (with 
angular) to localStorage of the browser. And on load, first check if there's 
data in localStorage before going to backend directly. But this is limited on 
one user alone, and even that just until the browser wipes the storage.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Configuration driven Components

[Zlatko Đurić]

Hi Gaurav,

Let me also take a shot at this.

If I understand this properly, you want to have a Core module which 
provides NavBar as a navbar component, which can go horizontally or 
vertically. Additionally, the items in navbar are implemented as NavBarItem 
components. Perhaps you also have a NavbarService which gives programatic 
access to these two components. So now you publish the module and build 
another app to use it.

First, you want to be able to configure NavBar (parent component) as needed 
- that should be quite doable, a simple @Input() layout = 'horizontal'; 
will do these things.

Now the trickier part, in this new apop, you want the NavBar component from 
Core, but you want your own custom nav item instead of the core NavbarItem 
- right? For that, I think something like this could work:
Parent, NavBar uses 'nav-bar-item' as a selector. So in your new app, you 
import NavBar, but declare CustomNavItem with the same selector, which 
extends the original NavBarItem. Similarly in this custom module you can 
provide CustomService as an implementation of NavBarService, again, 
extending it first and overriding the methods you want altered.

And then export it all as a new module. And your app uses this other module 
instead of the original one.

I'm pretty sure most of this should work without fuss.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Änderungen im Code werden durch ng serve nicht publiziert

[Zlatko Đurić]

On Wednesday, October 18, 2017 at 2:41:49 PM UTC+2, 
andre@netzwerkcenter.ch wrote:
>
> Hallo zusammen
>
> Ich habe immer wider die Situation, dass neue Methoden nicht automatisch 
> bei gestartetem ng serve verfügbar sind.
> Erst nach dem ich via Ctr. + C den Server gestoppt habe, und dann wider 
> via ng serve starte, sind die Änderungen
> im Browser via localhost verfügbar.
>
>
It's unclear to me if this is something that happens for you *always,* on 
any change, or just sometimes, infrequently?

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Deploying Angular to AWS - S3 or Elastic Beanstalk?

[Zlatko Đurić]

Hi William,

On Tuesday, October 17, 2017 at 8:32:53 AM UTC+2, William Saxton wrote:
>
> I'd like to use AWS to host my Angular web app, as well as use all of the 
> Amazon cloud services as necessary (DynamoDB, ElasticCache, etc).  I 
> planned on using Elastic Beanstalk because I have experience with Heroku so 
> I assumed it was similar.
>
> But now I see a lot of advice to deploy apps to AWS via S3 instead.  Is 
> this only for stack sites with static pages?  Can you still deploy your 
> site to S3 and interact with other AWS services, such as authentication, 
> web services, etc?  I don't see ANY examples of people deploying Angular to 
> Elastic Beanstalk, so I'm wondering if that's because S3 is the best way to 
> do it. 
>


You can deploy a static site on S3 (and then put Cloudfront in front of it, 
that's the usual way). As for interacting with other AWS services, it 
depends on services themselves and the design of your system. An Angular 
app can, from the client directly (e.g. browser) you can access AWS 
services using AWS Cognito or similar. E.g. for DynamoDB you'd use AWS 
JavaScript SDK which can sign your requests etc. The SDK will encrypt your 
payload etc. Other services, you might need to also deploy some sort of API 
or proxy, usually on ElasticBeanstalk or you can use an AWS Lambda function.

The benefits of this direct approach is that you have no "backend" to 
maintain. The disadvantage is that each and all of your clients must what 
your datastructures look like, constrains etc.


-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: AngularJS: socket.io or anything you recommend

[Zlatko Đurić]

On Monday, October 16, 2017 at 10:00:46 PM UTC+2, Tito wrote:
>
> Greetings,
>
> I would like to start using socket.io so that I can display changes on 
> back end to client's UI so that user does not need to refresh screen.
> Any good reads out there you recommend? and/or do you recommend something 
> else? 
>
 
Socket.io is probably more robust and gives you flexibility.

But if your use case is simple, and you control your backend, you might 
also try server-sent events? It's probably simpler as you don't have to 
implement one more transport method all around.

This is also an older article, but can get you 
started: 
http://www.smartjava.org/content/html5-server-sent-events-angularjs-nodejs-and-expressjs

Zlatko

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: How to use angular2 http API for tracking downloading progress status

[Zlatko Đurić]

On Friday, October 13, 2017 at 1:57:21 PM UTC+2, Vinu Prasad wrote:
>
> Hii..everyone angular2 . There are many fetching process takes place in my 
> project from server-side. I want to display the data fetching status at 
> client side . Plase help me how can I make it possible. 
>


I'm not sure I understand, are you're trying to show progress bars for 
multiple downloads? Maybe try something with HttpClient (Angular 4.3+): 
https://plnkr.co/edit/8WzFdGtHboJg1ZuY63d5?p=preview

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Interfacing old system with new Angular 4 frontend

[Zlatko Đurić]

Well, that click to post went out too fast :)

I've meant to say, look at this plunk to see what I'm talking about:


https://plnkr.co/edit/ifgGessycEUdy7lL0Y57?p=preview

On Saturday, October 14, 2017 at 10:05:59 AM UTC+2, Zlatko Đurić wrote:
>
> Robert, I think it's a simple scope issue. Your iframeClickHandler is 
> attached to a click freely, which means it's scope is the iframe, not your 
> component. Hence this.router is undefined. You need to bind that function 
> to your component, like this:
>
> if (typeof doc.addEventListener !== undefined) {
>   doc.addEventListener("click", this.iframeClickHandler*.bind(this)*, 
> false)
> } else if (typeof doc.attachEvent !== undefined) {
>   doc.attachEvent("onclick", function (this) 
> {this.iframeClickHandler(this)}*.bind(this)* )
> }
>
>
>
>
> https://plnkr.co/edit/ifgGessycEUdy7lL0Y57?p=preview
>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Interfacing old system with new Angular 4 frontend

[Zlatko Đurić]

Robert, I think it's a simple scope issue. Your iframeClickHandler is 
attached to a click freely, which means it's scope is the iframe, not your 
component. Hence this.router is undefined. You need to bind that function 
to your component, like this:

if (typeof doc.addEventListener !== undefined) {
  doc.addEventListener("click", this.iframeClickHandler*.bind(this)*, 
false)
} else if (typeof doc.attachEvent !== undefined) {
  doc.attachEvent("onclick", function (this) 
{this.iframeClickHandler(this)}*.bind(this)* )
}




https://plnkr.co/edit/ifgGessycEUdy7lL0Y57?p=preview

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: bypassSecurityTrustHtml stripts angular form tags

[Zlatko Đurić]

Did you try injecting some common service into that dynamic module, and then 
communicate via that service?

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Picture taken from Camera/Gallery not reloaded

[Zlatko Đurić]

I suspect you might need to sanitize the file url. Now I don't remember exactly 
for angular 1, but I think the service is called $sce, so look into that first. 

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: bypassSecurityTrustHtml stripts angular form tags

[Zlatko Đurić]

On Thursday, October 5, 2017 at 9:59:47 PM UTC+2, Turkel wrote:
>
> Great it works perfectly now. After hours of tries I was able to combine 
>> code Router, Http and HTML Converter within one component.
>>
> You are great developer, i`d love to be your student :)
>
>
Thanks, I appreciate a good joke :)

Zlatko 

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: bypassSecurityTrustHtml stripts angular form tags

[Zlatko Đurić]

Well, you didn't add formsModule to your *dynamic* module :)

Try this: https://plnkr.co/edit/vEEQECofC7qfvCYCJ4bg?p=preview


-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Re: [AngularJS] Re: bypassSecurityTrustHtml stripts angular form tags

[Zlatko Đurić]

Sorry, my mistake, typing that on a phone without checking.

You don't need sanitizer here. Put the "actions" prop directly into the
template.


On Oct 1, 2017 9:01 PM, "Turkel"  wrote:

> The HTML which I m fetching is :
>>
>
> {"actions":"Password<\/label>\r\n\t\t\t type=\"text\"\r\n id=\"password\"\r\n [(ngModel)]=\"password\"\r\n
> name=\"password\">"}
>
> actions variable contains HTML for which linked within component.
>
> --
> You received this message because you are subscribed to a topic in the
> Google Groups "Angular and AngularJS discussion" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/
> topic/angular/ftz0lLIlrDA/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> angular+unsubscr...@googlegroups.com.
> To post to this group, send email to angular@googlegroups.com.
> Visit this group at https://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/d/optout.
>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] bypassSecurityTrustHtml stripts angular form tags

[Zlatko Đurić]

The problem is that such form (or anything you passed in via sanitizer) is 
outside of angular scope. Simply said, angular doesn't know about your form.

You could, after you pass the form in, try and attach your own listener to the 
form, but that's messy and probably buggy and has other problems too.

Better thing to do is to have that fetcher thing (which fetches the form) 
create a dynamic component. That's a bit more work but much better and easier 
to work with, once you grasp the concept.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Add http header to loadChildren http request

[Zlatko Đurić]

Hi Brian,

I think overriding Http or HttpClient won't help with this - Angular uses 
ResourceLoader to load templates etc. You would need to override that and 
provide your own implementation. Check this ticket as a starting 
point: https://github.com/angular/angular/issues/13286

Zlatko

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Angular 4 material select option filter null and space

[Zlatko Đurić]

Simply filter this in your component. When you fetch that data, do something 
like this:

   this.places = data.places.filter(p => p.place);

That should do it.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] storing a max value in a component

[Zlatko Đurić]

The simplest would be `max` operatorin an observable:

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/max.md

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: docker as a dev tool set?

[Zlatko Đurić]

I agree with Juri. Docker can be quite useful. But the question is, is it 
useful to *you*? What specific job you want it to do? Develop your angular 
apps, and only deploy them as docker images? Or maybe use docker images of 
your backend server for use in local development? Or use some dockerized 
tools to isolate whatever task in your build pipeline (like building image 
srcsets) and offload that build task off your meager laptop?

It's definitely useful, but don't push it if you don't need it. To finish 
in the oldest of devops buzzwords, KISS!

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: 80% of my coding is doing this (or why templates are dead)

[Zlatko Đurić]

The article is interesting, although with a bit different perspective than 
mine. Here's my take on the issue.

I think the perspective I've mentioned is about the proper abstraction. And 
proper separation of concerns You say (or I think you do) that the goal of 
your JavaScript code is to produce HTML code. 

You say in your article that "Angular JS is a template language". I totally 
don't see it that way, I see it as a "framework to write library code in".

Let's go with a crazy hypothesis. My wife should be able to build a 
website. No programming skills, she knows how to click on things, drag and 
drop and type stuff.

And she needs to produce this:

Hello, David

Basically, it's a Hello {{ username }}, in Angular terms.
Or as the component (simplified):

@Component({ selector: 'greeting-header', template: 'Hello, 
{{name}}' })
class Greeting {
  @Input() name: string;
}

But since my wife doesn't know HTML, JavaScript, or anything, she would 
have to have the Visual Studio, right? Drag and drop, simple as that.

Drag a nice little header block. And add a name.


What I've liked about the AngularJS (Angular 1.x) and some libraries before 
that (like YUI and others) is that you could extend existing HTML tags and 
add your own elements. But for me, this somehow resonated the best when I 
first tried Polymer (and the wider concept of Web components).

Web Components standard tells me *explicitly*: go write new HTML tags.

What I do then is _I'm writing those components she's using in Visual 
Studio_, not producing HTML. So, I'm not writing HTML, I'm writing things 
as extra little buttons in Visual Studio.  I'm not even writing for that, 
as my wife may be using another IDE or a web tool or a text editor like vim 
- the point is, she doesn't know HTML, she knows about blocks.

What I'm writing is, ultimately, Chrome code. Just not in C++.

Then she's using those components.

You have a native tag, say . It has a simple declarative way to 
specify it's details: type="text", minlength="3".

What I've given you up there is , right?
(I know, close that tag properly, but for brevity.)

So in Visual studio, when my wife is "programming", the "website" above 
(couldn't resist it all :)), if she needs to drag an input block, there's a 
popup or dropdown or something asking her for type. And for my 
greeting-header, she needs to say what name. But she doesn't know the name 
upfront. What she does know, though, is the variable name in the database 
"sheet" she's pulling the data from: username. Hence, Visual studio is 
asking her: specific name? (It would be ) 
No, she says.
Then, VS asks, from where should I pick the name? `username`, she says. 


So, for me, I'm trying to wear two+ hats when doing a webapp: 1 is a 
library dev, who's creating components for my other selves to use, and the 
other hat to use simple HTML tags, and simple HTML really, to get those.

So in my head, when I'm writing a template, I'm writing just HTML, I don't 
care about JavaScript, API's, Observables etc. It's all just syntax.

Now, your article mentions that templates go crazy with branching, loops 
etc. Let's just take _if_.

Hello, {{ name }} you

(Ignore the fact that we can {{ name || 'you' }} for a moment.)

Right? Well, one way to remove that if is to have "name" ready right away, 
in that calling component. But since "name" here is not HTML, but rather 
_data_, let's do it in the programming part of the webapp - in JavaScript 
(or TypeScript, whatever).

In this case we just default the name. There, if is gone. Because again, 
separated my data management (in a programming language) from building 
blocks in visual studio for my wife (HTML).

Compare that _if_ with your DSL example.

function greet(name) {
  const label = 'you';
  if (name) {
label = name;
  }
  return Hello, {label}
}

How is that different from
@Component({
  template: `Hello {{name}}`
})
class GreetComp {
  @Input() name = 'you';
}

(And I don't mean different by "this is functional, and the other.." thing. 
I'm talking about logic.)


But say we have a bit more complex thing. If user.role === admin, show the 
button, otherwise hide it. So, . Conditional, 
logic, programming, right?

How does my wife tell visual studio that? She's dragging in a button. 
"But", she says, "please show this only to admins". Let's assume the visual 
studio added a checkbox on the form. "Show only to admins". Works for 
input, button, , whatever. As she's dragging that box in, 
she's checking the "admin only" thing. From this perspective one might say 
the loop is not programming, and we're not "programming" in the template, 
we're just checking a checkbox. So when you're in the template itself, 
you're away from logic, just check that box.

I believe I could go on to a simple repeater, or handling of events. As 
I've said, it's mostly a matter of perspective, and remembering to change 
hats when opening different files.

But one could argue that since it's a conditional 

[AngularJS] Re: what is the preferred pattern for creating a repeater (repeating divs) in ng2?

[Zlatko Đurić]

Well, *ngFor *is* the repeater for Angular, if you want to use it. I'm not 
sure if you just got the syntax wrong or you're asking for something more 
complex.

In case it's just about syntax, you have to do something like this:


  {{ user.name }}


Maybe you also want to show the numbers, something like this:


   {{ i + 1 }} - {{ user.name }} 


Or like a table, you want to highlight even (or odd)  rows:


  

  {{ user.name }} 

  


You can also get a boolean if it's the first or last entry. More in the 
docs:

https://angular.io/api/common/NgForOf



On Thursday, July 27, 2017 at 7:36:33 PM UTC+2, random512 wrote:
>
> A basic use case from my perspective would be to display a parent div with 
> several formatted child divs of the same type with different data. For 
> example, display first name of each user in a collection in repeating divs. 
> The following implementation is not valid ng2 but should show what I'm 
> looking for: 
>
> 
> {user.FirstName}
> 
>
> Can you post a url that provides a good sample implementation along these 
> lines?
>
>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Angular 2 - Get viewContainerRef of a different Component

[Zlatko Đurić]

Can't you pass it around like anything else in Angular, via a service? A simple 
Subject could probably pass this around.

In any case it sounds fishy to pass those around. I assume that there might be 
a case but I can't think of one right now. What is it that you're trying to 
achieve? Hook to an event, attach some content, rearrange tabs? None of those 
sound like a job for another component, like Navbar. Maybe navbar can express a 
desire for something and your tab manager will do it?

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: periodic refresh using xml http get request

[Zlatko Đurić]

On Wednesday, July 26, 2017 at 2:20:21 PM UTC+2, Stéphane Ancelot wrote:
>
> I have a view that will need to refresh some data on display every 300ms.
>
> I will get these data with an xml http get request.
>
> what sounds to be the best method to do the refresh loop (getting data and 
> refresh ?) .
>

 This is really a broad question. But speaking in generic terms, it would 
be something like this:

- have a service which exposes a shared observable, say data$;
- the service has the method to fetch the remote data and update the shared 
observable above, say getRemoteData()
- that service Observable.interval() which calls the method to fetch the 
remote data

- have your component that displays the data
- have the component subscribe to the data observable from the service.

Also, depending on your views, maybe you don't need this remote data on all 
views. In that case make sure that you inject the service only in the view 
that needs it. Or at least don't start the Observable.interval() 
automatically, but rather kick it off from the actual component (and stop 
the polling if the component dies).

That's fairly simple. Now, fetching remote data, processing it and updating 
views may take more than 300 milliseconds, depending on what the data is 
and how big is the view. You probably also need a safeguard which can 
ensure that if the previous request is not complete, don't start a new one. 
And also probably that if it fails to fetch fresh data in several seconds, 
you kick off a new one anyway. That might be a way to do this.

Now, if you have control of the remote endpoint, did you consider a 
websocket or an SSE (server-sent events) endpoint? It could have less 
overhead.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Re: [AngularJS] Re: running angular multiple apps from one folder

[Zlatko Đurić]

Certainly! Personally I would strongly suggest separating the codebases
completely (backend is 1 repo, for now, frontend is another completely.
Takes care of so much confusing things.)

Anyway, you need a few things set up. Like, you don't wanna let your entire
node_modules/ folder public. You might have something that's critical or
can even jeopardize the underlaying system (like, exposing the *del*,
*rimraf* or similar). Which means, angular and other public code is limited
to, say, public/ folder.

But, how do you do the sharing then? Well, another thing you should be
doing anyway (and luckily it's easy to do) is run a production build.
Something like webpack/rollup. You know, tree shaking and all. What it does
is it takes your Angular code, and Angular libs from node_modules/, and any
other libs your code uses, and bundles it all up in one (or a few) nice
file - and you only serve this file to public.

Which again means you'll have to setup to deal with. Say your
compilation/build step (what I said above) puts stuff from public/src to
public/dist folder. You tell express to use only that code.

And that's basically it. Maybe a few more things, like namespacing your npm
scripts better and you should be good.


Of course, while you're developing, you probably have some sort of local
angular dev server, which autocompiles your changes in typescript and other
files, and reloads the browser. So you could either run that dev server on
a separate port or somehow adding tihs compilation step into your dev
pipeline for your node server. So you run your node server and whatever's
watching for *those* changes, is also watching for frontend changes to
restart or refresh the statically served routes and fire off a browser
reload.

That's why I strongly suggest that you take the other, IMHO much better
approach. Build the node backend in one folder. Clean and simple, and make
tests for your endpoints. Don't bother with unit tests if you don't have
those already. Just make sure your GET /api/users returns an array and can
do paging and make sure that POST /api/comments asks for proper
authentication or permissions.

Than make your frontend app in a separate repository. Also write all the
tests and ignore anything on the backend.

That's much easier to reason about. When you're working on backend, you
don't care about pixels or form alignment or whatever. Just index the
database properly. And when you're done, you go align the pixels and forms
and don't have a singlest worry about database indexes. And as a bonus, you
could still add another build task to your frontend code, that takes
whatever frontend is built currently and copies it to the backend /public
folder.

Although I suggest splitting that one too, because again it simplifies
deployment and stuff. Don't worry about numbers of servers. You can serve
Angular apps off of S3 for probably less than a dolar, or off of a 5$
digital ocean bucket if you really need something advanced. And your node
backend is deployed wherever you deploy it anyway. And you sleep much
better, trust me.

Also, don't worry about your node_modules sprawling for now. If you have an
older android phone, it might be a problem. I mean, if you're developing
stuff on it. Because I've just looked at size of all my node modules on
this laptop:

find projects -name node_modules -maxdepth 2 | xargs du -shc
...
2.5G total

It has my major work projects, 2 node backends, 3 angular2 projects and
some of it is just a copy of itself (for stupid reasons, don't ask), and
some random nonrelated stuff.

My main workstation probably has like 6 gigs of node modules. I have a last
year's phone and this all could fit on it and still leave ton of space for
my photos. Although I don't know what I'd do with it on the phone.

Well, there's my totally oversized and unnecessary, but probably not
harmful midnight answer to your question. Just like my node_modules/,
oversized and all, but it's not in anybodies' way.

Cheers and ask specific questions if you have them.




On Tue, Jul 25, 2017 at 6:38 PM, Tito <yosi...@gmail.com> wrote:

> ok been a while and now I am ready to dive in. so yes I am using angular
> code with node.js
> I would also like to use same node_modules for these I do not want
> node_modules sprawl. Is that possible to have shared modules folder for
> both to use?
>
> Thanks
>
> On Wednesday, June 21, 2017 at 1:16:28 AM UTC-7, Zlatko Đurić wrote:
>
>> Hi Tito,
>>
>> Congratulations on your first production deployment! :)
>>
>> There are multiple ways to run multiple "apps" from one Node (express)
>> app. You're saying Angular apps, but it seems like Node.js is involved too,
>> so I'll try to address some cases. If you have one very specific
>>
>> TL;DR:
>> - if it's just angular apps, serve app.use('/app-virtual-path',
>> express.static('/path/to/app'))
>> - if it's Node.j

[AngularJS] Re: Is it safe to import custom .js files, and Jquery library ?

[Zlatko Đurić]

On Wednesday, July 19, 2017 at 4:03:20 AM UTC+2, kapil Budhiraja wrote:
>
>
> I'm writing an web application using Angular 4, and would like to know if 
> it's safe to load a JavaScript file to connect to socketIO for emitting and 
> listening on responses ?
> Also, I want to use jQuery for dataTables features such as filter, export, 
> search etc
>
>
I would avoid jQuery (or anything external) for table manipulation, unless 
you want to offload the* whole* thing to the 3rd party lib. As Sander says, 
there are pretty awesome implementations of data tables for Angular 2+, 
just an npm search away. You find something you like, and if you expect 
you're going to go crazy with your demands, you can always do pull requests 
with whatever feature you need, or fork your own.

But even for basic tables it's simple to filter stuff out. That is one of 
the things that pushed Angular so hard, this binding between the DOM and 
your data. So you always operate on your data, and Angular works out the 
rest.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: How to implement ACL / role based authorization with angular 2?

[Zlatko Đurić]

On Monday, November 28, 2016 at 4:51:35 AM UTC+1, Sander Elias wrote:
>
>
> I also add something like this to the css of the project, to prevent items 
> from briefly flashing into view:
> [has-access] {
>display:none !importand
> }
>
>
>
Well this is a cool trick that I haven't thought of :) Thanks for the great 
tip, Sander. 

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: dynamic layout of controls

[Zlatko Đurić]

There are multiple ways to do this.

One is: wait until you load the config file and then *redirect to *a url 
that will render the appropriate components. You might use router, or even 
multiple router outlets for all that. E.g. let's say your base route is 
something like /treeview.

So you read the config, the config says "render dropdown1 with param 
someParam, render dropdown2 with range 1-5, render treeview on path 
/path/to/file and show table with results from id=35, load 20 results for 
that grid.

Meaning, after you get the config, and then change the app state -> which 
is done by changing the url -> which is done by calling router.navigate. 
And your resulting app state, or url, looks like this:

/treeview;dropdown1=someParam;dropdown2=1-5;treeview=%2Fpath%2Fto%2Ffile;tableId=35;tableLimit=20

(I've url-encoded the treview path there).

But how would the code look for this? In my example above, all route params 
are optional, so something like this for route config:

RouterModule.forChild([{ path: 'treeview', component: TreeViewComponent }]);

And your TreeViewComponent would than simply listen to param changes and 
respond, something like this:

class TreeViewComponent {
  constructor(private activatedRoute: ActivatedRoute, private router: 
Router, private myConfigService: MyConfigService) { }

  ngOnInit() {
// First, get ready for parameters change
this.activatedRoute.params.subscribe((params: any) => {
if (params.dropdown1) {
  this.dropdown1 = params.dropdown1;
  this.doSomethingForDropdown1(params.dropdown1);
}
if (params.dropdown2) {
  this.dropDown2range = parseThatRangeSomehow(params.dropdown2);
  ..
}
...
});

// And now actually get that config and respond to it
this.myConfigService.getConfig()
  .subscribe((config: MyConfig) => {
this.router.navigate('treeview', config.dropdown1, 
config.dropdown2, config.treeview, config.tableId, config.tableLimit);
  });
  }
  ...
}

And finally, how to deal with rendering? Again, multiple paths. One way to 
have it done is, like you've said, *ngIf. Another is, actually put all 
those elements into their own subcomponents


  


  


  
  
{{ option.whatever }}
  

  

Or this component might have  of its own instead. Or maybe 
some of it is static, you just need the param to load the treeview, and the 
other stuff is dynamic, like those dropdowns, that might oir might not be 
shown.

Again, this is just very random, vague bunch of ideas, and the actual 
implementation depends a lot on what exactly you need to do and which are 
your use cases, and which params are mandatory etc.



On Thursday, July 13, 2017 at 5:04:17 PM UTC+2, Reza Razavipour wrote:
>
> I have an app that should display nothing on the page until a config file 
> has been read.
> Once the config file is read, the list of components that should be 
> displayed is determined.
> This will impact the layout of the page also...
>
> Generally speaking, how would the ng directives, (*ngIf, etc..) look like 
> in the app and component htmls?
>
> I have attached a simplified version of my app.
>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Wait for http.post to return Cookie.set

[Zlatko Đurić]

On Wednesday, July 12, 2017 at 10:00:16 AM UTC+2, Tommaso Betti wrote:
>
> How can i return an Observable in the private method if i have to return 
> the Cookie if i don't need to refresh?
> Isn't the same thing that i'm doing here? 
>
>  if (!Cookie.get("access_token")) { 
> this.getRefresh(Cookie.get("refresh_token"))
>   .subscribe(
> data => this.saveToken(data),
> err => alert('Invalid Credentials')
>   );
>
> cookie = Cookie.get("access_token");
>
>
The problem here is that your "cookie = Cookie.get('access_token')" is 
running *before* this.getRefresh is resolved. You fire off getRefresh, than 
get the access_token, than go on to make that HTTP call params, but your 
getRefresh hasn't yet executed. So in the next loop, your getRefresh goes 
on to fetch the new access_token, *and* you fire off the resource request. 
And than a century later, your http calls start resolving and you get your 
values back.

So the solution, super simplified, is this:

private getCookieValue() {
  if (this.cookie) {
return Observable.of(this.cookie);
  }
  return this.http.post() // OAuth stuff
.map((res: Response) => {
  this.cookie = res.json(); // or whatever,
  return this.cookie;
});
}

Than your getResource always gets this private method first and chains the 
actual resource call to it. But maybe take a look at things like *Subject,* 
*ReplaySubject* instead of *return Observable.of / this.http.post*. So to 
get a cookie, subscribe to your cookie subject, and the cookie subject 
logic knows that if it has the value already, it will return it without 
making the call again. Basically the same in the crude example above.

Now, depending on how short-lived your user sessions are and how long-lived 
your refresh/access tokens are, you might even make a call to get the fresh 
token *before you bootstrap* the app. You know the bit where you do 
something like this:
  
  platformBrowserDynamic().bootstrapModule(AppModule/*, options*/);

Well, first resolve your access_token, than add a *providers *array there 
with a service that's already configured. But I guess this is specific in 
how long before your users close your tab, or if you have specific 
permissions for certain calls that you have to check for and various things 
so YMMV there.


-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Wait for http.post to return Cookie.set

[Zlatko Đurić]

Well it's not"after the map" that's the problem here, it's"after the map has 
resolved".

So in your use case when you need to call getRefresh, you would have to chain 
the two calls; first, call the refresh token endpoint, and when it comes back, 
than you can use your cookie.
So your "resource" call would make two chained calls and return the result of 
the second call. You can do that by returning a flatMap instead of map. But 
that would do just for the branch with no cookie set in advance.
Now to streamline it, maybe _always_return a flatMap and get the cookie in s 
separate private method that returns the cookie if there, or fetches it if not. 
And the return is always an observable you can subscribe to.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] How Do I disable a clicked button in AngularJS?

[Zlatko Đurić]

Maybe have is Disabled being a map instead?
E.g.directive would be:
  ng-disabled="isDisabled[$index]"

And than your controller sets that:

addToCart(index, ...rest) {
  ...
  this.isDisabled[index] = true;
  ...
}

(Or whatever the method names, typing on a phone here).

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Need local style sheets

[Zlatko Đurić]

I would try downloading the bootstrap libs locally: 
https://v4-alpha.getbootstrap.com/getting-started/download/

Or maybe via npm: npm install bootstrap@4.0.0-alpha.6

After that, you would need to change your build process, whether it's manual, 
ng-client, webpack or something else, to include the libs into the final build.

Finally, if the cdn links are hardcoded and not injected while building, you 
also need to change the cdn links in your index.html.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: angular2 and lite-server

[Zlatko Đurić]

I would still avoid it. For one, now you have a firewall in front of your XP 
box, but it still has potential built-in vulnerabilities and it's still a 
bottleneck, potentially slowing down the whole service you're providing.
And the second thing, you gain nothing by it.

What's the problem you're trying to solve with this? Why wouldn't you use a 
regular deployment workflow?

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: How to Select First row index of P-dataTable in Angular ?

[Zlatko Đurić]

On Thursday, June 29, 2017 at 11:22:24 AM UTC+2, har...@rapidd.net wrote:
>
>
> I am showing some data in P-dataTable but i want to put input text field 
> on click on first row of table only (I am getting inout box but get 
> repeated through out of thee table).
>


This should be really easy to achieve - give your column template the 
rowIndex and show the imput if the rowIndex === 0 - like this: 
 https://plnkr.co/edit/yETk9NqbhQkcAfoaAVpA?p=preview

Here's the relevant bit:


  {{ data['Col1'] }} 

  

The important part is that *let-ri="rowIndex"* where you give your template 
the rowIndex.

Disclaimer though, I don'tuse PrimeNG but I was curious so went and looked 
it up.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: running angular multiple apps from one folder

[Zlatko Đurić]

Hi Tito,

Congratulations on your first production deployment! :)

There are multiple ways to run multiple "apps" from one Node (express) app. 
You're saying Angular apps, but it seems like Node.js is involved too, so 
I'll try to address some cases. If you have one very specific 

TL;DR:
- if it's just angular apps, serve app.use('/app-virtual-path', 
express.static('/path/to/app'))
- if it's Node.js code as well, write those in their own modules, and 
export their routers (not the whole express apps), than mount the 
individual routers on a global express server.


If it's just multiple angular apps, than it's pretty simple - serve apps on 
different routes (or even domains/network interfaces/whatnot).

E.g. simplest way to serve those with Node on different paths, e.g.
server.example.com/app1 -> serves angular app 1
server.example.com/app2 -> serves angular app 2
etc.

app.use('/app1', express.static('/path/to/app1'));
app.use('/app2', express.static('/path/to/app2'));
// ...
app.use('/appN', express.static('/path/to/appN'));

Basically, every app is served in its own virtual path.

Alternatively, you can serve the angular apps on different subdomains, e.g.:
app1.server.com -> serves app1
app2.server.com -> serves app2.

How to do this depends on your server setup. You can route it directly with 
node, using something like this: 
https://www.npmjs.com/package/express-subdomain. Alternatively, you can use 
the simpler version above, but than use some rewrite rule on the reverse 
proxy that's in front of node (such as nginx, or IIS since you're on 
windows).

If you also need some server-side specific code, those separate routes 
handle the stuff, for you. For clarity, maybe just separate those in their 
own files/folders with their own routers, than mount it all on one global 
express router and handle routing properly. The added benefit of running it 
all on a single node instance is that you get to share common middleware 
like authentication or authorization, which is likely to be useful in an 
environment that you describe.

Example:

// app1.js
const router = require('express').Router();
router.use('/app-specific-endpoint', (req, res) => {
  res.json({ message: 'Here is something that is specific for this app' });
});
router.use(express.static('/path/to/angular/code'));
module.exports = { router };helps a bit

// app2 -> the same, just for the different angular app.
const router = ...
module.exports = { router };

// global express app file, e.g. server.js
const express = require('express')
const app = express();
const middleware = require('./middleware/'); // optionally, if ou need it.
const router1 = require('./app1').router;
const router2 = require('./app2').router;

app.use(middleware.auth()); 
app.use('/angular-app-1', router1);
app.use('/angular-app-2', middleware.hasRole('admin')); // specific for 
app2, say, permissions check
app.use('/angular-app-2', router2);
const port = 8080;
app.listen(port, (err) => console.log(err || `Listening on ${port}`));

I hope this gives you ideas on how to start. If you share more details, 
maybe you can get more specific answers.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Angular with Typescript - why to instantiate object I get from server - performance dilemma

[Zlatko Đurić]

Sander, can you please enlighten me? I was under the impression that 
"casting" backend responses is just for static checks - when you compile 
Angular to JavaScript (to deploy to prod, or even run in browser), that no 
checks are actually enforced?

E.g. take something like this:

class Post {
  author: string;
  content: string;
}

class PostService {
constructor(private http: Http) {}

getPosts() {
return this.http.get('/api/posts')
.map((res: Response) => res.json());
}
}

When that's compiled, we don't get any enforcements on *name* or *content* 
properties, 
those are used just for static checks (and IDE assistance).

Am I wrong about that? Because if I'm not, than the original question - on 
performance dilemma - is moot, it doesn't matter, right?



-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Best Practice for REST API calls that take an extraordinarily long time?

[Zlatko Đurić]

On Wednesday, April 19, 2017 at 3:25:03 AM UTC+2, rob...@leapyear.io wrote:
>
> Imagine you have an Angular 2 app that makes calls to a REST API with 
> Observables.  Further imagine that the response time of these calls will 
> take many tens of minutes or even hours to return a response.
>
> In many cases your users will launch such calls to the REST API at the end 
> of their work day, close their laptop, and go home.  When they login in the 
> morning, they will be looking to be notified about the status of the calls 
> they initiated the previous day.
>
> Might you have any suggestions on how best to architect such a scenario?
>
>
As Sander has suggested, this sounds like a server-side solution. You don't 
say what technology you use on backend, but take a look at what kue does: 
https://github.com/Automattic/kue (it's a node.js/redis based module). 

Basically your server:
1. receives a request 
2. queues the job and saves some job identifier
3. returns that identifier to the client.
4. kicks off the job in background - or even better, lets something else 
handle the job processing part entirely and update the job id status.

So now your Angular client has to make a request and it receives back the 
job id - immediately, not after an hour. It can then store this job id 
(say, in local storage) - so even if the user closes their laptop and goes 
home, tomorrow the job id will still be there. Then when the page is 
restored (or reloaded or whatever) you can ask the server if your job is 
complete.

Now that's just a rough outline, many details depend on what you actually 
do, what you use to do it and other things.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: How to launch in production using angularjs seed - in particular using GAE

[Zlatko Đurić]

Well, in theory, you don't need to run your server to run stuff on app 
engine, but that depends on which angular seed project are you using. You 
should have something like "npm build --prod" or some such script, or if 
it's angular-cli, "ng build --prod". That would create an output, usually 
in "dist/prod" folder of your project, and that folder is all you need to 
serve. You don't need the app engine specifically, just a regular shared 
host as this is essentially like a static website (in that that you don't 
need to do any backend computation at all). So just put it behind an nginx 
and you're fine.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: AngularsJS 1 and AJAX queries - Remove GET parameter in URL before calling a page (before launching the route)

[Zlatko Đurić]

On Thursday, March 16, 2017 at 8:08:06 AM UTC+1, amadese wrote:
>
> Hi,
>
> I have problem with my application in Coldfusion 11 (main page: 
> http://hostname/myapplication/). 
> I'm trying (with *angularJs 1*) to implement the routes. 
>
> The page contents different links like:
>
>-  http://hostname/myapplication/index.cfm#/all-contacts
>-  http://hostname/myapplication/index.cfm#/add-contacts
>-  http://hostname/myapplication/index.cfm#/view-contacts/10890
>
>
> *My problem:* a parameter "ticket" (due to an authentication system) is 
> inserted in the url of the page when the page is called:
>
> http://hostname/myapplication/index.cfm?ticket=12345#/add-contacts
>
> The ticket is not inserted at the end (I don't know the reason) and the 
> page is called but the data are not correctly retrieved. When the page is 
> called, some AJAX queries defined in the controlers and factories are 
> executed.
>
> The url generated for doing AJAX appears in the console with this error:
>
> GET http:
> //hostname/myapplication/countries.cfc?method=getCountries=undefined
> 
> --> 302 Document Moved
> 
> Cross-Origin Request Blocked: The Same Origin Policy disallows 
> reading the remote resource at 
> https://loginsystem/login?loginRequestId=blabla. 
> (Reason: CORS header 'Access-Control-Allow-Origin' missing).
>
>
> I think that when the page or an AJAX query is loaded, our authentication 
> system tries each time to reload.
>
> Do you have an idea for solving this issue? Is it a problem of Angular, of 
> the CF11 server or a problem of the authentication system?
>
> Is it possible before calling a page to clean the url (delete the 
> parameter "ticket") for allowing to the route to be working ? I would like 
> to test this kind of solution for solving the problem.
>
> Could you please help me for solving this problem?
>
>
Well, two things, if I understood all this correctly.

First, if you want to intercept your service requests (AJAX), you can use a 
httpInterceptor. It's basically a piece of code which tells angular what to 
do with *any or all* requests to backend.
Look up "Interceptors" section at this page:
https://docs.angularjs.org/api/ng/service/$http

But basically, you'd create an interceptor that looks up the *ticket* parameter 
and deletes it, if it's present.

But second and more important, I don't think that's the problem. You have a 
CORS problem, it seems. Basically your calls from *https://yourserver/* to 
*https://loginsystem/* fail because a) your *loginsystem* server doesn't 
allow cross-origin requests from *yourserver,* - which you can also set 
with either proper config or an interceptor in your angular app.


 

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Code review

[Zlatko Đurić]

On Thursday, February 2, 2017 at 8:54:40 AM UTC+1, Mark M wrote:
>
> I am an experience developer, but new to Angular.
>
> Is this a good place to ask for critique/code review on a new Angular 
> project?  
>

There are a few people here who are usually constructive in their critique. 
I'm not sure how much I can help, but like Sander, I'm offering my help if 
you want it. 

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Angular JS server side data rendering on page load

[Zlatko Đurić]

If I understand correctly, you want to avoid the extra AJAX call/roundtrip, 
right?

Two main options here:
- no need to edit the data:  render the list yourself in pure html, no need 
for ng-repeat. You can still add Angular components/binding or whatever 
tags, but you don't need ng-repeat specifically.
- you need to manipulate the data on client side: use ng-init.

Example of first list (rendered with whatever you're doing in the JSP) 
bellow. Let's assume you provide a "colorList" list dynamically.


  

${color}

  


Now your angular client app can get the value out of your server-prepped 
list.

The second version, where you wanna manipulate the said list, you can try 
with ng-init angular directive:


  {{ color }} 


Now your angular app can get access to the list itself and, e.g. add more 
colors to the list.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Multi user data binding question

[Zlatko Đurić]

On Thursday, January 5, 2017 at 2:34:16 PM UTC+1, tim garver wrote:
>
> Gotcha,
> i was really more concerned with the auto refresh of the remote data. Then 
> the client to client would be automatic
>
>
That is easily achieveable. It's just not part of the Angular as a 
framework. See, if server has data changes, then *it* is in charge of 
telling clients about the changes, not the client. So whatever you have on 
the backend should tell your client somehow about the data changes.

But framework is ready for it. E.g. in Angular2, you can create an angular 
service that connects via websockets as you mentioned, or listens for SSE 
(server-side events) which is relatively standardized, with plenty of 
examples around the web on how to do this. So the server pings your angular 
service, which in turn updates its data, which angular then reflects in 
your views, however you decided to show this update.

And this is exactly what Firebase does - it pretends it's your server and 
then tells clients when to update local data.


-- 
You received this message because you are subscribed to the Google Groups 
"Angular" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Re: Angualr2 MyApp compoment with dynamic innerHtml/template from render engine

[Zlatko Đurić]

That sounds like angular app didn't start at all.

You also need to bootstrap the angular MyApp module somewhere. Are you doing 
that?
What does your index.html look like?

-- 
You received this message because you are subscribed to the Google Groups 
"Angular" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[AngularJS] Angular 2 base ref issue

[Zlatko Đurić]

Yes, this is a simple, common issue. 
To load the app, you ask Apache the index.html page, which it serves you. 

While in the app, when you click "dashboard /tracker" link, angular intercepts 
it and simply displays you the new page. You never touch Apache. Now, when you 
refresh the page, you don't click, you ask the Apache the " dashboard/tracker 
"link directly, but it did not exist. There is no such file.

So what you do I'd tell space to-do for all non-existent requests to serve 
index.html, it will load your index page instead. Not redirect, just serve 
directly. If you redirect, angular gets the url rewritten and doesn't know what 
page was requested.

HTH.

Zlatko 







-- 
You received this message because you are subscribed to the Google Groups 
"Angular" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Re: [AngularJS] Re: error 404 bootstrap with angular 2 final release

[Zlatko Đurić]

Oh, Angular CLI, should be easy:

Take a look at this:
  https://github.com/angular/angular-cli#global-library-installation

It will make sure that ng serve also picks up your npm-installed scripts *that
you want to expose to the app*. This is so that you may also pack dev
scripts (e.g. uglifiers or debug tools or whatnot) but not having to ship
them off to production.



On Tue, Oct 4, 2016 at 6:20 PM, Luís Augusto de Godoy <ladgo...@gmail.com>
wrote:

> Hello Zlatko,
>
> Thank you for your help,
>
> On the way in my application does not have the blanks, only appeared in
> the post when copied and pasted.
>
> I started the project with angular-cli,, then changed the file
> package.json including the bootstrap and jquery, and installed again npm
> install, it was included a bootstrap directory and jquery in node_modules
> directory.
> I've already tried:
>
> 
> 
> 
> 
>
> nothing worked
>
> What worked was to put the css file in a subfolder within the app
> directory.
>
> thanks for help
>
> Em terça-feira, 4 de outubro de 2016 04:14:29 UTC-3, Zlatko Đurić escreveu:
>>
>> Hi
>>
>> On Friday, September 30, 2016 at 8:27:28 PM UTC+2, Guto Godoy wrote:
>>>
>>>
>>> and in index.html I inserted the line:
>>>
>>> 
>>>
>>
>> Like Elias said, strip the whitespace. Additionally, you might want to
>> prepend that path with */*, so it becomes
>> */vendor/bootstrap/dist/css/bootstrap.min.css*.
>>
>> Finally, how and where do you pack your dependencies? Maybe it's not
>> under */vendor* at all, maybe it's something like
>> *node_modules/bootstrap*. How did you initialize your angular project -
>> did you use one of the seed projects? Which one? If not, angular-cli then?
>> How did you install or download bootstrap and where?
>>
>>
>> --
> You received this message because you are subscribed to a topic in the
> Google Groups "AngularJS" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/
> topic/angular/22HPJJr9x7c/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> angular+unsubscr...@googlegroups.com.
> To post to this group, send email to angular@googlegroups.com.
> Visit this group at https://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/d/optout.
>



-- 
Zlatko

-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.