What are /r/angular's favorite Products & Services?

From 3.5 billion Reddit comments

I'm confused. How is this different from mat-select that is included in the official google release of angular material?

Angular Material MatSelect

if you have a service worker, you can detect that a new version has been deployed and force the user to refresh the app: https://angular.io/guide/service-worker-communications#forcing-update-activation.

Don't use angular if you're going to use PHP includes.

It sounds like you are missing some fundamentals about angular and components.

I can highly recommend taking a little time and do the heroes tutorial:

https://angular.io/tutorial

Coming from PHP there's a bit of a learning curve, once you get through it, you'll never want to use php again.

I'm not sure what is the issue you're having but I would not recomend using moment (https://momentjs.com/docs/#/-project-status/).

Personally I use date-fns, but there's other alternatives in the link above.

This topic is mentionned in the official style guide: https://angular.io/guide/lifecycle-hooks#oninit They also link an article explaining why you should avoid putting complex logic in the constructor.

Confirmation for routing to another module can be easily implemented with CanDeactivate.

Refreshing and xing the tab can be a bit trickier. You will have to add listener to a window event beforeunload.

Something like this could work for a given component:

@HostListener('window:beforeunload', ['$event']) unloadHandler(event: Event) { // Your logic on beforeunload }

You're not forced to download anything. For example, if you are using material autocomplete you can defualt the options to null, or empty. then as the user types a certain amount of characters, hit your API to get a list of suitible matches from your backend.

https://material.angular.io/components/autocomplete/overview

You can also bind to the observable directly using the async decorator. There are also the ng-pending class to show a spinner or message if needed.

Hope this helps.

You probably need to bind it?

https://angular.io/guide/attribute-binding#binding-to-an-attribute

<div [attr.data-is]="chat.timestamp">

Not sure why you need to go through CSS:before to put text in, though.

Use a service that exposes an Observable from a Subject.

In the child component: Whenever possible, use the async pipe to consume the data. If you must manually subscribe to the Observable, always remember to unsubscribe in ngOnDestroy to avoid memory leaks.

Eventually if your services start getting complicated, consider a Redux-pattern state management library (ngrx/ngxs).

The importance of naming convention is explained in the documentation: https://angular.io/guide/styleguide However, you already brought up a very good point, you component.ts, model and service will all have the same file name. If the file names are too long for your colleague to read, I recommend this VS Code extension: https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme After a couple days you will be able to recognize which file you are working with at a glance.

You should add to your blog post, that there is big security risk when Using URL params within your HTML. If you mark these values as trusted you are allowing xss attacks.

https://angular.io/guide/security https://security.stackexchange.com/questions/166675/is-inserting-url-parameters-directly-into-the-page-safe-in-angular-2

First, there are two versions of angular.

Angular 1.x aka angular.js - this is the old outdated one. Some might disagree but I would recommend to not start any new development in it.

Angular 2+ - Angular. Angular, angular, angular, just angular. Angular is on semantic versioning so technically it's on v6. Fundamentally v6 is the same as v2. This is the one whose documentation is at angular.io is for. This is the one to start new development in imo.

When you are going to use an spa for the front end you should stop thinking in terms of an entire application. You should start thinking in terms of 2 completely separate applications that just happen to talk to each other.

So the backend, a C# asp.core or whatever api is fine, should serve data not premade views. Usually the data is in json format.

The front end will just happen to talk to this api. But fundamentally it's a separate application.

If you have experience with C# then you should be able to come to terms with typescript relatively quickly. Angular also follows an mvc model with dependency injection, etc that should feel pretty natural to you. And the tutorial on angular.io is a good start.

If you are doing this in the template you are better off in using a pipe instead of directly calling .slice, as it would otherwise be run on every change detection cycle and not only when your objects have changed: https://angular.io/api/common/SlicePipe

so you'd need *ngFor="let o of objects | slice:0:4"

Disclaimer: I had no idea what Plesk is prior to reading this. But googling Plesk it apparently uses standard web servers, so this answer ought to apply.

For typical use cases (not counting Server Side Rendering, which is an advanced case) Angular apps are simply deployed as a static collection of HTML/JS/CSS etc files. With that in mind, Angular isn't special, it works like any other SPA. You do a prod build that gives you a deployment artifact (basically a folder), then you throw that up on your web server and configure the web server to use it (taking care to have the webserver setup rewrite rules that make your routing work). Angular documents this pretty well as is: https://angular.io/guide/deployment

TL;DR Use Angular's deployment guide to setup the web server that Plesk uses.

You've left out a crucial step. How are you populating your "dataSource" variable?

The datasource should be a properly populated array of data (like in the examples, https://material.angular.io/components/table/examples). So for example:

const data = JSON.parse([your json]); this.dataSource = data.values;

Angular has a style guide: https://angular.io/guide/styleguide

Scroll down to their "Overall Structural Guidelines" and give it a read.

I like to split my app in "features" with ng g module <feature-name>. It keeps it a bit cleaner and I would create a "shared" folder in each feature that would have it's service and model structure as well.

My first app started out small, but grew quickly and ended up with a ridiculously large service and model file. I then read the angular style guide and spent an afternoon breaking the app out into features. Not only is it easier to navigate, hopefully now it wont someone else as long to figure out the structure.

So your app module shouldn’t need to export anything as exported items will only be made available to a module that imports AppModule which you aren’t doing.

In regards to the error, you should import MaterialModule in the UsersModule as it is components in this module that will be using the material components. You would import MaterialModule in all modules that use the components.

Generally importing a module in AppModule will make injectables available to all child modules but not components. You may have noticed that in child modules you need to import CommonModule to use things like *ngIf, which is the same reason, we don’t automatically get access to components and directives that are available to the parent module.

There is a great FAQ section of the angular docs that might help:

https://angular.io/guide/ngmodule-faq

Hopefully this helps!

You should only be using the built in HttpClient. It's built on top of XHRHttpRequest so it will work with old browsers unlike Fetch.

Why the HttpClient vs Fetch? The client is built specifically for Angular so it is recommended that you use it. It returns Observables which make the client extremely flexible, for example, doing a retry on a failed request is effortless and can be done in a very clean way.

You should read some more about the HttpClient though. https://angular.io/guide/http

This sounds rude to ask but why did you use Fetch anyway inside of an Angular project?

To answer your question: Change all requests using Fetch to the HttpClient, Use the HttpClientTestingModule, mock your request and check if the class properties are set.

It's annoying but you should change your code to use the built-in HttpClient, not only for testing sake but also for the framework sake. You aren't doing it in the "Angular way" now.

you would use a service and inject it into each of the components that needs to use it.

https://angular.io/tutorial/toh-pt4

the heroes tour pretty much does exactly what you're looking for. it has a service that exposes a collection of heroes and you can select an individual hero to view details.

i would recommend you just go through the tour in full.

Nice, glad to hear it 🙌

So the thing at play here is called View Encapsulation.

What happens is that, by default, a component's stylesheet is scoped only to that component. That means that any styles in that stylesheet will only affect the html in that component.

Because the component stylesheets are kept separated, the other components don't know about your material import (even if they're direct children).

You could get around this by explicitly setting ViewEncapsulation.None, but that's not really considered great practice and could introduce a whole host of bugs.

Using the root stylesheet instead works because it gets linked directly in your index.html file and isn't affected by view encapsulation.

Hey!

Don't navigate within the APP_INITIALIZER, mostly this doesn't work and if it would, it would most likely bring a lot of unintended behaviours.

I think what you are looking for is a nav guard see https://angular.io/api/router/CanActivate

This is normally where you want to verify things like auth state, permissions and so on, you can also navigate with the router from a nav guard.

&#x200B;

The APP_INITIALIZER is more intended for loading things BEFORE the app starts.

It's actually the opposite, it's more easy to debug and test. And even Angular officially recommends this approach on their documentation, with reasons why this is a good practice.

Here are a couple of ideas that would challenge you a bit while learning and implementing the basics of Angular:

• An app that lets you track your spendings and give you an overview over the current month and an estimation on how much you will spend until the end of it.
• A weather app using the OpenWeatherMap API that lets you show weather information for locations you searched, create favourites and share the URL of locations and forecasts.
• A blog that has a homepage, an article overview and article page using prismic.io as a Headless CMS.

Start with a component library (like https://material.angular.io/ ). This will let you make pretty nice looking websites without having to know much about "design".

IMO, after using component libraries for a few projects, you will eventually know enough about CSS and understand what looks good to you, that eventually you'll be able to roll your own, should you want to.

I started a job recently using this approach with a component library using https://storybook.js.org/ it feels really nice, keeps things consistant without being overly rigid with well designed components.

The thing being discussed: https://storybook.js.org/

I find the video almost unwatchable, demo thing quickly to get my attention don't bore me for a full minute while I wait for you to get to the point.

Dumb but simple solution:

Here is a working stackblitz. I just hacked something together you can do better for sure.

&#x200B;

Just use an EventEmitter in your child component and emit showValue after validation. Then you can do whatever in your parent component with it.

Here's a very simple demo of what you need: https://stackblitz.com/edit/angular-date-timer?file=src/app/app.component.ts. The timer updates every second with the number of milliseconds from now to that day. I hope it's clear enough! Reach out to me if you need anything else.

https://stackblitz.com/edit/angular-mzhmhk?file=app%2Fapp.module.ts

Check out this snippet - of course you are able to do the exact same pattern. The problem with this approach is that in Angular it's more verbose. Also classes play better with types - with your approach you can either ignore them ("any" type, see source in stackblitz) or keep them in check with actual code manually.

*edit: Nevermind the types issue, turns out that factory functions can work just as well as classes, see stackblitz.

Do the Heroes app code along on the Angular website. But before you dive in, make sure you have decent knowledge of HTML, CSS and JavaScript (ES6). Also Typescript (not that hard once you know JS. This five minute intro is more than enough).

Have a look: https://www.google.com/url?sa=t&amp;source=web&amp;rct=j&amp;url=https://angular.io/guide/router&amp;ved=2ahUKEwiGjO3VwYzgAhUbo4MKHbL7CyUQFjABegQIBRAB&amp;usg=AOvVaw1PfDtECptmtuS_C3jXPirS&amp;cshid=1548542384589

This is a really good answer. I would like to add that using interceptors are a common means for ensuring your HTTP requests contains authorization headers.

Also, in case anyone is using Angular 4, they now have the HttpInterceptor interface that will work similarly to the Angular 1 interceptors.

If the request fails, an HttpErrorResponse object is returned. So you can handle it depending on what your requirements are. You could possibly handle the error using the catcherror() rxjs operator to display some useful feedback and then also set your variable to some default/nullish value if that's appropriate. The angular guide has a reasonably clear section on handling errors and retrying failed requests here.

An overload for the get method has an options object as its second parameter, which has a params property. You may be able to put your entire query object there or may have to stringify it first and then parse it at the backend.

Checkout this page, under the get method section: https://angular.io/api/common/http/HttpClient

Are there any console, build errors? Are there any duplicate routes anywhere in any file?

Sometimes I find removing my changes and starting again helps as it forces you to write the code again and possibly fix any code that is wrong that you weren't able to spot before.

This may help if you haven't already been through it.

https://angular.io/guide/lazy-loading-ngmodules

Instead of using a resolver to retrieve the basic information required for your components, it might be better to initialize the required data (if applicable) with an APP_INITIALIZER DI.

This would ensure that your app is usable only when your webapi finishes its job.

Also, you should be able to use a resolver with "app.component.ts" given a proper routing configuration but I tend to dislike their usage because in my experience they don't mix well with guards

Ok. In that case, you're looking for an angular package.
You can create one through angular CLI:
ng g library <name> [options]
It will give you a starting point if you don't have the implementation yet.

and then you basically can pass the configuration to the module 2 ways.
1st: When injecting a module:
u/NgModule({
})
export class YourModuleModule {
static forRoot(): ModuleWithProviders {
return {
// config
}
}
}

2nd: Using Injector Token
export const MY_CONFIG= new InjectionToken<MyConfig>('MyConfig', {
providedIn: 'root',
factory: {
//Default Values
}
});

Then register in providers:
{ provide: MY_CONFIG, useValue: {// Configuration}}

And then MY_CONFIG will be available to be injected in the constructor.

For more information check out the angular docks
https://angular.io/guide/dependency-injection-providers

ActivatedRouteSnapshot will only have information about the route at the moment the component was initialized. If you want the component to respond to param changes (without having to leave/reload the page) then it is better to use ActivatedRoute.

This is great advice. Doing a deep dive of Angular.io tonight, though I'm concerned that Angular.io will go into all the newest features of Angular, and my company is only using Angular 11

You can change the encapsulation in the component in your Angular project.

@Component({ selector: 'app-dev-props-form', templateUrl: './dev-props-form.component.html', styleUrls: ['./dev-props-form.component.scss'], encapsulation: ViewEncapsulation.None, providers: [PropertyLockService], }) export class DevPropsFormComponent implements OnInit {}

This will keep the global styles of the wordpress theme from bleeding into your web component.

More info:

View Encapsulation

Yeah plain javascript can go inside typescript files.

And yes, you could do it like that or follow a more Angular way and use @ViewChild. I'm here to help if anything is not clear!

To get value(s) from observable, you need to subscribe.

in the subscribe callback you will have the values. The point of observable is that you will get values 'some time later'.

angular.io site has excellent tutorials. The Tour of heroes is good to do in full. You can also read up on rxjs - that is the observable library used by angular.

This is not only an angular problem, Other frameworks and programming languages also have observables, or other similar async concepts.

Can I ask, why are you attempting to write the bootstrapping code by hand?

If this is just some sort of learning experience by all means continue.

But if you are just trying to get a working angular project you should use the cli to handle this for you.

It's pretty much the standard Angular aproach to your problem.

You have multiple inputs and want to access them all should one change. That's why you access all of them through a single reactive form.

Best read up on Angular's reactive forms and RxJS operators - you shouldn't do angular without them.

There's always the official documentation... I'm currently learning Angular through Pluralsight, I think that's a solid option especially if you've read a couple book already. They tend to be more project focused and a tiny bit more practical. Since you've read two already, I think your next steps should be: Doing a video course and then taking the solution at the end of the course and modify / expand it into something you can learn from.

one thing I wish more people did is when you are teaching people a certain command, use full flags, not abbreviations or aliases

for example,

ng build my-app -c production

should be

ng build my-app --configuration=production

https://angular.io/cli/build

First, two way binding exists. It's used extensively in the template driven forms method.

And I'll say upfront that if your use case is something like building 100 forms for an app that all of the solutions provided by angular start to look pretty bad. There are various libraries for those sort of use cases but I personally don't have experience with them so you'd have to research yourself.

But, the reactive forms exist because their behavior supports a number of features that template driven forms don't.

The two biggest features they support over template driven are complex validation routines integrated into the form flow and, as the name suggests, better reactivity by being modeled on top of an rxjs driven design.

I certainly don't claim that reactive forms are perfect. To be honest I have a whole litany of complaints about them. But the complaints I have are completely different from yours.

For instance, you don't manually extract the values back out. You can just call value on the root FormGroup to get the entire value back out.

And I don't understand why you are manually merging back to the original model exactly. I mean certainly you might want or need to work with a drastically different format for api responses vs the form model but most cases can be handled pretty well with the form builder. Its relatively trivial to write a function to parse a given object and create a form using the builder if your model is relatively constrained.

Or you can use the valueChanges and statusChanges observables on form group to reactively modify a response. Generally, I'd prefer to just do it once at submission but the option exists.

Maybe you could explain what it is you are trying to accomplish rather than how you are trying to accomplish it for more advice.

I wouldn't worry too much about TypeScript, it is a superset of Javascript so you are already 90% of the way there, it is basically Javascript + better typing, classes and interfaces.

I am in the process of learning Angular, and I had a few false starts where I started the "Hero of Heroes" tutorial at https://angular.io/tutorial and bailed out early because I thought I "had it" and the tutorial was a bit slow. But I ran into problems, and then when googling for the soutions I found that the solution was in "step 6" of that tutorial so I went back to it.

Basically I would suggest doing the "Hero of Heroes" tutoral, and force yourself to type it all out (cutting and pasting won't develop the "muscle memory" with respect to the syntax etc.) It covers all the Angular basics including introducing RxJS fairly early, and it will expose you to enough TypeScript to pick that up too if you already have JS fundamentals down.

It doesn't always work, so here's a reference for future use: https://angular.io/cli/new

In your case specifically, you would have needed to type 'project-name --routing'.

Out of interest, is there any reason in particular you're using intelliJ to generate the project rather than the command line? There are a ton of advantages to knowing your way around a terminal.

The docs have a pretty good work through / description. Since you already understand components and services and similar items from other frameworks, the main issue would be the class items in typescript, decorators, and observables.

Angular is a larger framework than React and Vue and there are some differences. However, picking up the larger aspects of it should not take long for someone already skilled in those frameworks.

https://angular.io/docs

It depends on what your goal is, if you want to have a better understanding of css; style it with css (flex). If you don’t want to or write as less as possible css (like me); use something else.

I would recommend using angular material grid list: https://material.angular.io/components/grid-list/overview

Since you’re using material ui for input, you will have most likely the entire material package already available in your project.

Good luck!

The best approach imo is to find an existing set of components with a design you like and base off of that, for example Microsoft's Fluent or Google's Material Design.

Material Design site is here: https://material.angular.io/

I use it and those components typically get me 90% of the way there, and I only have to worry about designing custom components that don't fit into what they provide.

I have a coworker who uses PrimeNG, same idea, set of components with a consistent look and feel you can use as a base to build your own apps.

mat-slider is not a mat form field.

mat form fields are listed on this page

https://material.angular.io/components/form-field/overview

&#x200B;

Please make sure you read the angular and angular material documents.

The UI looks great, but the list of countries could be improved on with a search bar similar to what you did in the cities page. You could also improve the countries list UI by using Angular Material's List component (specifically a navigation list to navigate between items).

Additionally, the city not found error snack bar's message should be improved on and not display a verbose error tag.

Apart from that, great work on your website! :D

If I'm understanding this correctly I think I would use Angular Material's stepper control.
Link: https://material.angular.io/components/stepper/overview

You could then add a click event to the matStepperNext /Previous buttons to filter out the next set of data.

Are you talking about the material stepper? https://material.angular.io/components/stepper/overview

If so you can move that programmatically by referencing it in the dom.

In the example they give it looks something like ``` <mat-horizontal-stepper [selectedIndex]=selectedIndex #stepper> <mat-step>Step1</mat-step> <mat-step>Step2</mat-step> <mat-step>Last</mat-step> </mat-horizontal-stepper>

You can reference it in the typescript controller by

selectedIndex = 2; @ViewChild('stepper') stepper ```

And use the next, previous, reset methods.

interval(5000).subscribe(() => this.stepper.next())

I Just finished using this. It's really good and clearly written.

https://auth0.com/blog/real-time-charts-using-angular-d3-and-socket-io/

https://stackblitz.com/edit/angular-ivy-zfrkrb?file=src/app/app.component.ts

&#x200B;

I hope this link works, I messed up when copying the other one

CP gives you more flexibility. You can build some sort of "wrapper" component and insert different content on different parts of your app.

A good example are the form-fields from Angular Material.

They have a component "mat-form-field" that applies some styles and common functionality but it is your choice what kind of <input> , label and icon you put into it.

<mat-form-field appearance="standard"> <mat-label>Standard form field</mat-label> <input matInput type="email" placeholder="Placeholder"> <mat-icon matSuffix>mail</mat-icon> </mat-form-field>

<mat-form-field appearance="standard"> <mat-label>Standard form field</mat-label> <input matInput type="number" placeholder="Placeholder"> </mat-form-field>

Fixed stackblitz.

First change: Moved form initialization to ngOnInit.

public parentForm: FormGroup; ngOnInit() { this.parentForm = new FormGroup({ ... }); }

Second change: Added a method to grab controls to the form array, typed as FormControl.

<app-child [formControl]="fetchStepControl(i)" [index]="i"></app-child>

public fetchStepControl(index: number): FormControl { return this.steps?.at(index) as FormControl; }

Third change: Since your subform has its own validators and validates as "invalid" by default, that seems to cause a problem that reactive forms doesn't cope with well. Immediately after initializing the form, you'll need to give the change detector a kick in the pants:

constructor( private changeDetectorRef: ChangeDetectorRef ) {}

ngOnInit() { this.parentForm = new FormGroup({ ... }); this.changeDetectorRef.detectChanges(); }

The above is the official way to properly detect changes. While doing a setTimeout works, it's kind of a hack compared to actually notifying Angular about your intent.

Fourth change: Similar to your form initialization, you had another situation that would cause changed after checked errors when removing the last item from the list and inserting a new (invalid) subform:

removeItem(i: number): void { if (this.steps.length === 1) { this.steps.removeAt(i, { emitEvent: false }); this.steps.push(new FormControl()); this.changeDetectorRef.detectChanges(); } else { this.steps.removeAt(i); } }

Hope that helps.

https://stackblitz.com/edit/angular-8-template-form-ap9x77?file=src%2Fapp%2Fnode.component.ts

I forked your stackblitz, made some changes and think I achieved what you are looking for. Feel free to ask if there's something you don't understand in my code.

Dont worry about this. Just make sure you use some kind of virtual scroll to avoid a huge DOM. Here a example i created some time ago.

https://stackblitz.com/edit/v2000

You can either add some options to your typescript configuration like here: https://stackblitz.com/edit/json-import-example

or you can make a get request to it using http service like the angular tutorial shows you here https://angular.io/guide/http#requesting-data-from-server

The issue is that Angular isn't aware of that event listener. You can use (window:resize)="resize()" in the template instead. Here is a demo.

In general, looking for an "Angular way" of doing things will result in simpler code.

This is the closest I could get, but it comes with problems
https://stackblitz.com/edit/angular-bakxpm?file=src%2Fapp%2Fpercent.directive.ts

If you are new to Angular , I would recommend you to have a look at the Angular online documentation first. https://angular.io

Considering your question itself, I can highly recommend the Angular 6 book by Adam Freeman it starts with the fundamentals and also dives into more complex topics.

While Angular 7 was a new major release of the framework, it didn't have any "breaking changes". Which means that a Application writen with the Version 6 is compatible with another written in Version 7 and can therefore be easily updated. The differences mostly consist of updates to used framework dependencies : •Typescript 3.1 •RxJS 6.3 • Node 10 Summarized there are only few differences between the versions and most of them are performance enhancements or updates. You can read all about that here: https://www.quora.com/Whats-new-in-Angular-7-What-are-the-differences-between-Angular-6-and-7

If you decide to buy the book I would strongly recommend you to take a course on the topic aswell, or look into some YouTube tutorials. Because when learning from books, their is often a lack of exercise.

Hope that can somewhat help you.

It'll import a class called HttpClient, assign it to a class variable in the constructor (private http:HttpClient), and then use that variable (this.http) to make a post/put/get/whatever.

https://angular.io/api/common/http/HttpClient

shared/models/user.model.ts

For truly application-wide models, I have a directory in SharedModule (created per the style guide). In some cases, a model really belongs more to a module containing the service that serves it up (UserService). In those cases, I give that module its own models directory.

You should also make sure you've configured the server to redirect using the router. For example, I'm using nginx and had to include the try_files line to redirect to index.html. The router should handle it from there.

Angular Guide on Deployment

Maybe you should take a look at https://angular.io/api/platform-browser/DomSanitizer

You can inject arbitrary HTML or scripts or styles, if you trust it. This is pretty easy, therefore I'm not sure, if I misunderstood your requirement. There's no whatsoever border between the injected script and your app, like it would be with iframes, so the viewer can crash your layout and your app. Also you can only display "HTML compatible" data, PDFs have to either be converted to HTML or use an iframe.

Angular app is loaded inside a single html file. Multiple html files means multiple angular applications. Try making routes in your application to achieve similar effetct: https://angular.io/guide/router

Check out the Tour of Heroes service example with observables. https://angular.io/tutorial/toh-pt4. The component subscribing to the message service results is what you want to focus on:

getHeroes(): void { this.heroService.getHeroes() .subscribe(heroes => this.heroes = heroes); }

You'll probably want to update it eventually, but it shouldn't cause you any problems in the short term. A lot of the styling is probably forwards-compatible.

One thing to keep in mind is that Bootstrap 4 drops support for some older platforms. Depending on your requirements, there might have been a specific reason for choosing that version.

Link to more info.

I'm pretty sure if you just rename the file extension between .css and .scss, and update the styleUrls: ['./my-component.component.css'],, then Angular will automatically use the correct preprocessor(s) for you.

And yes as explained in Tailwind's documentation, using tailwind directives inside of <code>.scss</code> files will cause extra headaches, so your plan to mainly use .css sounds like a good idea.

I wouldn't recommend going through the effort of removing sass compiler compiler completely. I haven't tested it, but I would guess the system is pretty flexible, and you could even use @import commands smoothly from .css to .scss file and such too. So you can mainly use .css file. But if run into a case where you really need the .scss functionality for something, just use one .scss file for that one situation.

Maybe [this stackblitz](https://stackblitz.com/edit/angular-playground-yhmnf5) is what they mean by template driven forms? It seems type safe to me.

I don't think there's anything immediately broken or insecure in those Angular versions, but even if it's safe today it might not be safe tomorrow. The Angular team doesn't support versions that old, and won't issue security patches.

You should definitely be on a supported version, at least an LTS version. The support policy has the currently supported versions and their lifetimes.

https://angular.io/guide/releases#support-policy-and-schedule

To determine if something changes in a form you can use ngOnChanges. For the case of input, it's only triggered when object reference changes of input, so to trigger ngonchanges, have a method you call when input changes for a particular field that just changes object reference, but keeps the value the same. Link 1 Link 2

Hello, you can try to sanitize the url https://angular.io/api/platform-browser/DomSanitizer, or if I were you, I would create a boolean in my object like item.showVideo. Not really recommanded to call function in templates in angular (like you do with startWith) for performance issue.

I won't try to convince you. But I will argue that there isn't as big of a difference between the two as there should be. Even if you create a reactive form, you still have to set up each input in the template and link it to the appropriate FormControls.

Compare that to form builders provided by many of the backend frameworks (e.g., Symfony, Drupal) -- where you can define all the input types, validators, etc. in code and it generates the HTML for you.

100% agree. By all means separate out the "app" from some sort of static website that can be SSR'ed and properly SEO'ed. But putting the entire thing inside a single angular app, and expecting good SEO without significant effort is going to cause headaches.

I've used ng-universal, and yes, it works, but the complexity it layers onto an already complex system is counter productive IMO. A much better approach is to separate out the app from some sort of static or SSR'ed website that can be SEO optimised extremely easily

Spotify is a good example. The main site, www.spotify.com is SSR'ed. The web client, the "app", is not.

The Angular Style Guide is always a nice place to start if it’s a personal project, or a new start one. If you’re in a team that has a project already started, learning their structure is probably the best bet.

Angular.io
When you are learning some skill you shouldn't think about version of framework, all the changes that has been made are not breaking changes. You need to understand the basic concepts, and building blocks. You can buy book on angular2 and become angular14594858 developer. Don't think about version of framework, please.

Reactive forms is what Angular uses out of hte box. https://angular.io/guide/reactive-forms

Its been good enough for all the projects I've worked on. I did at one time try to implement a swagger to angular library, but the ones I found weren't mature enough. However the one or two i experimented with did generate the reactive forms for you as well.

I think for a form generator system, swagger would be much more convenient than whatever less used standard jsonforms uses.

> I can individually refresh each card, but my database has grown too large to do that

Moving a button isn't going to fix your database. You're still going to be hitting your back-end with multiple simultaneous requests for data.

If you need a shared event that the components listen for, it can be done as a Subject:

// In your service... private refreshSubject = new Subject<void>();

public get needToRefresh(): void { return refreshSubject.asObservable(); }

public handleRefreshClick() { this.refreshSubject.next(); }

// In your component... public refreshSubscription: Subscription;

ngOnInit() { this.refreshSubscription = this.dataService.needToRefresh.subscribe( () => this.refresh() ); }

ngOnDestroy() { /* Always unsubscribe (or use takeUntil, etc.) */ if (this.refreshSubscription) { this.refreshSubscription.unsubscribe(); } }

refresh() { ... }

Alternately, you could use a "smart services, dumb components" approach. The component would just be responsible for displaying the data which would get loaded by the service, and passed into the component via an Input.

All that said: "LiveData" implies that the data will automatically update itself when there are changes. Are you sure you need a "refresh" feature at all?

Try reloading your IDE after making this change as it's not always picked up automatically. Also you need to make this change in all your tsconfig files if you have a monorepo structure.

Here's a link to some information about Angular's strict mode, follow the docs to learn how to enable/disable different checks. https://angular.io/guide/strict-mode

Do you have npm installed? You will need npm. Make sure it is running and setup.

https://nodejs.org/en/download/

Run this to check the version of node installed:

node -v

Next, I would install the Angular CLI globally. You can do this by running the following command:

npm install -g @angular/cli

This might help you https://code.visualstudio.com/api/working-with-extensions/testing-extension#the-test-runner-script

The dist folder is what is published. You need the project files to continue developing. The node_modules folder is for the dependancies. You recreate those with an 'npm install'.

I am curious what is the hesitation with publishing your project. You only need static hosting and you can get that with Github Pages or Google Firebase for free.

If you truly cannot publish. you can modify the base href and open the html file directly with the browser from local storage.

Well I use dropbox (pretty much put my document folder in there) but I really need to look into git. I made an account on there so I could save my codesandbox.io stuff in there which is all public. Can you have a private git too? Will angular stuff run on there?

I think what you're trying to do is lazy loading in combination with tree shaking.

Luckily, typscript alredy shakes your trees. What this means is that even though you instantiate an object with 100 properties. Those properties aren't included in the object until it's already assigned. In this sense, all of your properties are not just undefined, but not even a member of the object.

Lazy loading is a design pattern used to be more memory efficient. You have a private property that is nullable and a public property that only has a getter. The getter instantiates the class and assigns it to the private property and then returns that object. EG if it already exist give it to me, if it doesn't exist make it then give it to me.

Sorry for the long link, here's an example of tree shaking in action and lazy loading on typescripts web editor. Hope this helps.

https://www.typescriptlang.org/play?#code/ATDGBsEMGduBlA9gWwKYGEq2AbwFB4hHAAOArgEbgCWowAggAoBOiJqzALgJ4Bcw0Ts2oA7AOYBuQsTCIRg5mVCdEzABQBKfDJmg50ROFQA6cIjFrOAC2rQNE4AHpHAE0SpoIgOSdgqAB62vqLAiGSc5JzG0jog1rbGTKzsXNzAALzAXpACQqJiXlKxRHryhiZmFvF2Ds7Abh...

Transloco is great, and actively maintained.

Angular has an official i18n option, but it is overly complex, and you have to do different builds for each language.

>Tracking the state of the form using an array
>
>Saving/Cancelling edits the user has made on the table

You do know that form/control.reset() is available, right?

Other than that, it kinda depends on the form. Most of what you describe is pretty typical logic to include in the component, but here are some possible options:

• Break out parts of the form into their own custom subform controls. For a data table, I'd guess that a form control for rows would be a good candidate, or perhaps even for individual cells that have complex behavior.
• Validation can easily be pulled out into custom validators. This is true even for cross-field validation.

All I can think of is using ng-content, though I make no promises it's the solution. Here's the documentation:

https://angular.io/guide/content-projection

Thats a good idea. Just make sure to look into TypeScript on its own, too, since angular is a massive framework and most angular tutorials wont explain basic ts to you. My recommendation would be to look into async/await + subscriptions, observables, promises, and rxjs. And defenitely do the Tour of Heros, you will get a good overview over most of the basics

1. Just so you're aware, you can choose any prefix you like, it doesn't have to be app. If you have a Foo-project, set your prefix to foo and the selectors to foo-header, etc.
2. There are may ways to structure your apps, there are opinionated tools like nx, which will set you up in a specific way, for example. Angular itself will recommend that you split your app into modules, and you can nest your components into folders per module. See https://angular.io/guide/ngmodules for more info and code examples. Also, the container/view or container/presentation pattern is popular in Angular as well, see https://indepth.dev/posts/1478/designing-angular-architecture-container-presentation-pattern for example.
3. Services, or if you use ngrx, selectors.
4. Depending on your architecture, I can imagine several answers to this question. But look into Services, Directives, Lifecycle Methods.
5. Local component state can be kept in the component (as properties of the component class), or using something like @ngrx/component-store. Shared state can be kept in Services (with or without subjects), or something like the @ngrx/store.

What you are looking for is a resolver. Resolver will load your data first and will then navigate to your page. Resolver can be combined together with guards inside your routing.

https://angular.io/api/router/Resolve

1. Learn what are SPA
2. Why we use SPA
3. How SPA works
4. What SPA problem solves
5. Go to https://angular.io/
6. Learn fundamentals
7. Learn about concept of reactive programming
8. Angular.io
9. Learn fundamentals blocks
10. Do tour of heroes
11. Learn unidirectional flow
12. Understand how DI works
13. Write components for basic UI elements, and try to think of way of inputs and outputs of component

Since you need server-side rewriting and you can't really do that got hit big lages, you have to use hash location strategy:

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

https://codecraft.tv/courses/angular/routing/routing-strategies/

>Would I just create an API and send HTTP requests to the API?

Yep, that's pretty much it. Look up a tutorial or two for either Python, PHP, or node on how to setup a super basic API on your computer.

Then play around with making different HTTP calls from your Angular app: https://angular.io/guide/http

Learn

- Rxjs- Change detection- DI

Uni directional flow and reactivity is same as any frontend framework.Learn and understand how angular works.

angular.io is your best friendTry to eliminate watching videos and tutorials for beginners, you are react developer you know everyting just different syntax. Just hop in
You can watch 50 minute introduction of angular on youtube and do mental check what is that in react and you will find all concepts are same.