Hey kids!! The previous post I made about adding a custom modal to your Angular app is only good as-is up to Angular version 12.
In the next Angular version 12, one of the properties needs an update.
Let’s take a look at what changed and how we can fix it.
The changes are minor and should be relatively painless .... I hope :)
First, check your Angular version to see if this even applies to you. There are two version types - the CLI and the project itself.
In your Terminal window, type:
ng --version to find out what CLI version you're on.
In my previous post, my CLI was running on Angular 12.0.2
I decided to use the same modal for a new project I'm working on. I installed the newest version of Angular and ran into a few crucial changes. The new CLI version I'm on is 13.02.2
To check you project version, you need to open the package.json file and find the "dependencies" section. This will tell you what Angular version the project is on. This is the old Angular version 8:
My new project version is 12
When I copied the modal component into my new project, I had a few errors that needed addressed.
First is the id in the modal.component.ts file
The easiest way to fix this is to add an exclamation point to the property. This will add a definite assignment assertion to the property.
The next issue was the el property. The parameter needs to have a specified type and can't be 'any'.
So, we want to call out it is a string value. We do that in the manner below.
And that's it! If you run into other errors, leave a comment and I'll be happy to help you mitigate the issues. Happy coding!