How to Share Data between Angular Components ? its a common question asked by angular developers… Data sharing is an essential concept to understand before diving into your first Angular project. In this tutorial, we will show you the most used methods for sharing data between Angular components. Of course , if we talk about […]
Catégorie: Angular
Reactive programming , c’est quoi ?
La programmation réactive est un paradigme de programmation asynchrone concerné par les flux de données et la propagation du changement. RxJS est une bibliothèque de programmation réactive utilisant des observables qui facilite la composition de code asynchrone. Un opérateur est une fonction qui prend un Observable et renvoie un autre Observable. On peut créer un […]
(SOLVED) How to deploy angular 2+ front-end + spring boot back-end ?
To deploy and angular (2,8,…10) front-end application with a Spring boot Back-end follow the steps below : 1. Build your angular application First you have to build your front with the command line ng build, for that open a new Terminal in the angular project and run : after running this command , you will […]
Solution for : How to check if subscribed data is an Array of object or an object ?
If you want to check if the data returned by our service is an Array or a simple object we can use the Array.isArray(**) function Example : here we added [data] when the service returns an object to make sure that we are affecting an array to our dataSource
(SOLVED) how to insert an HTML element before another ?
If you need to insert an HTML element like one <div> or any other element before an existing element in the HTML Document you have to : 1. Get the element by ID : 2. Create the HTML element 3. Insert the element Here we will use insertBefore function to insert the created Div before the recovered Table. If you want […]
Example NgStyle & NgClass : How to use ?
In this TuTo, we will answer about these questions : When and how to use the NgStyle directive to set an elements style ? When and how to use the NgClass directive to set an elements classes? NgStyle The NgStyle directive lets you set a given DOM elements style properties. in the first example , […]
(Solution) : Angular 2+ DataTable / DIV to PDF File
if you want to generate a pdf file from datatable / Array or content in HTML Div : run this : 2. import : 3. create the datatable or the content to print in html div: 4. Create a button to generate PDF and put the as click action “generatePdf(contentToConvert)” 5. Finaly past this function […]
TypeScript – Variable : what is the difference between (var, let, const ) ?
TypeScript follows the same rules as JavaScript for variable declarations. Variables can be declared using: var let const The let declarations follow the same syntax as var declarations. but you have to know that, variables declared with let have a block-scope. Block-scope means that the scope of let variables is limited to their containing block, […]
Angular Date Pipe Formats
In HTML : and you can replace the fullDate with any format you like :
(SOLVED) Angular 2+ : If ngModel is used within a form tag, either the name attribute must be set or the form”
Angular 2+ Error !!! “If ngModel is used within a form tag, either the name attribute must be set or the form” Solution : If ngForm is used, all the input fields which have [(ngModel)]=”” must have an attribute name with a value.
Angular 10: what’s new ?
The new version of Angular, Angular v10 is officially available since June 25, 2020. With this new update of the framework, the Angular team continues to improve the framework and offers updates to the ecosystem, but also a review of various points that I present to you in this article. Since the release of Angular […]
The lifecycle of an Angular component
When developing an Angular application, it is important to understand how components work, including their lifecycle. This lifecycle is managed by Angular, so it’s Angular that will create the component, render it and finally destroy it when necessary. ngOnChanges: it is called when an input is defined or modified from the outside. The status of […]
How can I use an ng-if condition to look for a specific character ?
How can I use an ng-if condition to look for a specific character ? Solution : ES2015 have String#includes method that checks whether a string contains another. This can be used if the target environment supports it. The method returns true if the needle is found in haystack else returns false. Here, string/char is the […]
Angular – NgRx : Introduction !!
Les fondamentaux de NgRx, avec des exemples de code Quand j’ai commencé à travailler avec NgRx, j’ai été confronté à une courbe d’apprentissage abrupte. Il a fallu pas mal de lecture et de recherche pour comprendre les éléments de base de NgRx. L’objectif premier de cet article est de transmettre les connaissances que j’ai acquises […]
How to integrate Angular 8 with Camunda BPM ? (SOLVED – Git Repo)
To integrate Camunda with Angular Single Page (Version 6 / 8 / 9)Try this Git repository : Camunda + Angular https://github.com/marwenmselmi/camunda-angular-6-8-9
How to check if value exists in enum in TypeScript
Solution : If you get an error for: Property ‘values’ does not exist on type ‘ObjectConstructor’, then you are not targeting ES2017. You can either use this tsconfig.json config: Or you can just do an any cast:
(SOLVED) An unhandled exception occurred: Job name “..getProjectMetadata” does not exist
Problem : When I start to run my Application, I get this error: I have these versions: Angular CLI: 8.3.19, Node: 12.14.0. Any Idea what causes this problem ? Solution It is a problem with @angular-devkit/build-angular. Try updating it by running : 2. Or downgrading it by specifying a previous version, such as
What is impure pipe in Angular ?
I am unable to understand impure pipes, some what better with pure pipes. Please explain with a simple and basic example ? Anser : A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe. An impure pipe is called for every change detection cycle no matter […]
(SOLVED) Access to XMLHttpRequest from origin has been blocked by CORS policy
If you have this Error , when you are trying to consume an API using Angular and Spring The solution is : Jusd add the annotation @crossorigin in your RestController to allow your frontend consuming the API Read also : Solution for : net::ERR_CONNECTION_REFUSED in Angular
(SOLVED) net::ERR_CONNECTION_REFUSED in Angular
net::ERR_CONNECTION_REFUSED : I’d like to access an API server, but the server hasn’t started. Then I got the error : Could I handle this according to the status of the response ? Solution 1 : Solution 2 : If you are using spring for the backend , just add the annotation @crossorigin in your rest controller to […]