In some tutorials, the instructor says that the Front end should not talk to your database directly. In case of Angular and Firebase, we have to provide our firebase credentials in our angular app. I agree its not safe if you have set the rules to true for both write and read in firebase. I know it is fine to have an intermediate layer (RESTful API), if you don't have any need for realtime updates from the database.
If I want to have realtime capabilities in my angular app,
In some tutorials, the instructor says that the Front end should not talk to your database directly.
The instructor here is most likely talking about traditional databases, where indeed their security model usually doesn't match well with allowing direct access by end-users. With such databases it's common to set up a so-called three tier architecture with a server between the end-user application and the database, so that you can control in that server what data the users have access to.
Firebase's databases however (both its Realtime Database as Cloud Firestore) were created specifically to allow direct access from end-users. They integrate tightly with Firebase Authentication to allow identifying those users, and then have a built-in server-side security rules language that allows you to control what data each user an access. For example, you could say that each user can only access the data that they created themselves.
we have to provide our firebase credentials in our angular app
What you're referring to is most likely Firebase's configuration data. There are not credentials, but merely values that allow the Firebase SDKs to find your project on Google's servers. See Is it safe to expose Firebase apiKey to the public?