Angular CLI with SPFx (SharePoint Framework)

Use Angular CLI with SPFx (SharePoint Framework)
Blogpost: winsmarts.com/...
Github repo - github.com/mal...

[@daneshwaranm5733]

its exciting to see how Angular CLI works with SPFx....

[@SahilMalik]

Yes - I will update this when v6 and elements are out, so we have a full working story. Currently the code I've published is a concept.

[@daneshwaranm5733]

waiting eagerly for your next video....

[@SahilMalik]

Yeah .. :) .. I just haven't had time to attack this, perhaps this weekend, but lets see .. so much piled up already. I did publish this though winsmarts.com/getting-started-with-angular-elements-1bbdf2e748a6 ... addressing SPFx with Angular CLI is easy and trivial. I hope to blog about that soon.

[@daneshwaranm5733]

Sahil Malik thank you for this link....waiting for your video tutorials...

[@mayursorathiya6740]

How to implement SPFX custom property pane control with angular 2+ ?

[@Tinnguyen_87]

So useful. Thanks you !

[@rajkrishna1979]

The property is updating through button event but updated value not render. Please let me know what I missed

[@sujitdas5885]

Can you please tell us how to set up a spfx project with angular 10 apart from using angular element?

[@jaafarfarissi6138]

a receive this message Access to script at from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[@DevarshiDavessj4]

dynamically data binding not working (such as dynamically adding data to array or using ngIf statements)...only works when component is loaded for the first time.

[@syam5850]

Same for me, any solution ? please

[@sureshvgknair3464]

Hi Sahil, Can I create a Angular application with all the features like SPA, routing etc and finally deploy it in SharePoint? Plz replay

[@TheHappinessSquad]

Yes.. all the angular compiled files can be uploaded/saved in SiteAssets library

[@RaghavendraC]

I am trying to implement the same steps with angular 7 and SPFX 1.7. But facing a lot of issues. so anyone has samples done for angular 7 and SPFX 1.7?

[@SahilMalik]

www.linkedin.com/learning/sharepoint-framework-for-developers-5-spfx-and-angular

[@xRynee]

Is there a way to get the context from appWebPart.ts to the components? I'd like to be able to use it to communicate with SharePoint lists. There doesn't seem to be a way to do this from the app.component.ts file.

[@SahilMalik]

I'd say abstract it out. It is a good design pattern to abstract it out - and it will make your move to elements easier in the future.

[@mikeshupe1207]

I'm working on this as well.... I'll post if I find a solution

[@xRynee]

Hey Mike, I had luck adding the following before the class definition in my appWebPart.ts: export var CONTEXT: any; Then, first thing in my render function, I set CONTEXT = this.context. From here, you can import it to your component or a service.

[@mikeshupe1207]

Hey Ryne - that works. I created a service that uses the context and gets list items - wish there was a better way of passing the object to the service but not too bad! import { CONTEXT } from '../webparts/appWebPart'; @Injectable() export class AssetService { ... public getItems(listTitle: string) : Promise { if (environment.production) { let url = environment.url + "/_api/web/lists/GetByTitle('" + listTitle + "')/Items"; return CONTEXT.spHttpClient.get(url, SPHttpClient.configurations.v1) .then((r: SPHttpClientResponse) => { r.json().then(rj => { console.log(rj); let items: any[] = rj.value; return items; }); }); } } ... } And in the App component, just use construct service like normal... export class AppComponent { @Input() description = 'Angular'; // title = 'Angular'; constructor(elm: ElementRef, private assetService:AssetService) { this.description = elm.nativeElement.getAttribute('description'); console.log('******COMPONENT******'); assetService.getItems(this.description).then(r => {console.log('Asset Types:');console.log(r);}); } }

[@mikeshupe1207]

Thanks Sahil!

[@mahendrav9991]

How to use multiple component use in spfx webart using angular 6 if any one try this ???

[@rainson12]

this is by far not compareable to how you would write angular code. The whole css / scss stuff doesnt work. @import in scss doesnt work etc.

[@SahilMalik]

You can modify the gulpfile to support CSS/SCSS.

[@El.Viejon.4x4]

how can i modify the gulpfile or what i need to add to support scss and css????