Append message or create message (angularjs directive to angular 6)

Hello I am migrating angularjs applicaion to angular 6 application, wherein I have in left side list of conversations: and each conversation has message(s) could be single or n number of messages. Now problem is that this functionality is working in angular js application and they have built in directive for that.

In HTML template they are using like this

<div class="message-content">
                    <div>
                        <message-compile compile="message.body" scope="{}" tosca-id="message-{{ $index }}-body-content"></message-compile >
                    </div>
</div>

So this directive is design to do like if any new message is coming up it will append new message to the existing message of selected conversation from left side of the list.

Below is the code for angularJS directive.

define(function (require, exports, module) {
    'use strict';

    var base = require('base');
    var utils = base.utils;

    configCompile.$inject = ['$compileProvider'];
    module.exports = configCompile;

    function configCompile($compileProvider) {

        $compileProvider.directive('messageCompile', messageCompile)

        function messageCompile($compile) {
            // directive factory creates a link function
            return {
                scope: {
                    compile: "=",
                    scope: "=?",
                },
                link: link,
            }

            function link(scope, element, attrs) {
                var scope_child = scope.$new();

                scope.$watch('compile', function () {
                        // element.html(scope.compile);
                        element.empty().append(scope.compile);
                        $compile(element.contents())(scope_child);
                    }
                );

                scope.$watch('scope', function () {
                        scope.scope = scope.scope || {};
                        scope_child = scope.$new();
                        for (var idx in scope.scope) {
                            scope_child[idx] = scope.scope[idx];
                        }
                        scope_child.$this = scope.scope;
                        // element.html(scope.compile);
                        element.empty().append(scope.compile);
                        $compile(element.contents())(scope_child);
                    }
                );

            };
        };
    }

})

if someone can give me hint on how to do this stuff using angular6 would be highly helpful. I know using observable or something which has inbuilt in angular 6 would be pointer.

I’m on my phone and still sleepy, so I can’t really look at your code right now. Generally, it sounds like you want a ngFor though.

Ok so Its been a while since I looked at AngularJS code, but the AngularJS code provided looks pretty intense and low level (as most directives usually are) as such I’d have like a 10% idea of what its actually doing. Its also possible the given code has nothing to do with the actual requirement, as such handling the use-case from scratch is probably the best bet.

So this sounds like a classic *ngFor use-case (as @ArielLeslie mentioned).

So I’m not sure how the original AngularJS code works, or what it even does, its possible it does some fancy “compile” of the messages or something, but I personally wouldn’t handle whatever its doing in a directive at all. If your migrating to Angular from AngularJS, the main thing to be focusing on is keeping things simpler and more streamlined when possible. This will help decrease previous technical debt.

Good luck :smile: